zoukankan      html  css  js  c++  java
  • vue 父组件给子组件传值

    组件是当作自定义元素来使用的,HTML元素有属性,同样组件也可以有属性,利用属性给子组件内部传值,子组件使用props来接收

    父组件:

    <template>
    <div>
    <props-component
    :title="title"
    :subTitle="subTitle"
    :userList="userList">
    </props-component>
    </div>
    </template>

    <script>
    import PropsComponent from '../components/PropsComponent'

    export default {
    name: "test",
    components: {
    PropsComponent //引入组件
    },
    data() {
    return {
    title: '我是父组件的titile',
    subTitle: '我是父组件的subTitle',
    userList: ['张三', '李四', '王五'], //组件的形式
    }
    }
    }
    </script>

    <style scoped>

    </style>

    子组件:

    <template>
    <div>
    <div>我是子组件来接收的title:{{title}}</div>
    <div>我是子组件来接收的subTitle:{{subTitle}}</div>
    <div v-for="(item,index) in userList" :key="index">姓名:{{item}}</div>
    </div>
    </template>

    <script>
    export default {
    name: "TestComponent",
    props:['title','subTitle','userList'], //接收父组件传来的值
    data() {
    return {

    }
    }
    }
    </script>

    <style scoped>

    </style>
  • 相关阅读:
    python_linux系统相关配置
    python_字典dict相关操作
    python_传参
    mapreduce 学习笔记
    linux 常用命令
    C++ stringstream介绍,使用方法与例子
    C++/C++11中std::numeric_limits的使用
    C++中string erase函数的使用
    C++中accumulate的用法
    malloc的用法和意义
  • 原文地址:https://www.cnblogs.com/ssjd/p/14543729.html
Copyright © 2011-2022 走看看