chaihongjun.me

[Vue]入门学习之十六Vue的父组件向子组件传值

Vue的组件化开发涉及父子组件之间的数据传递,这一节介绍的的是父组件向子组件传值的方法。什么样的情况下会出现父组件传值给子组件?因为一个父组件可以有N多个子组件,因此当有公共的数据需要维护的时候,可以把这些数据放到父组件内,然后再分享给各个子组件。

//Father.vue
<template>
    <div class="father">
        <p>
            这个是父组件
        </p> <!-- 3. 在父组件模板内引用子组件,4.并将父组件Father传值给子组件Son -->
            <Son :fatherInfo="fatherInfo"></Son>
        </p>
    </div>
</template>
<script>
// 1.导入子组件模块
import Son from '@/components/Son';
export default {
    name: 'Father',
    data: function() {
        return {
            fatherInfo: {
                fatherMsg: "我是你爹!",
                fatherAge: "45岁",
                fatherJob: "工程师"
            }
        }
    },
    // 2.注册子组件
    components: {
        "Son": Son
    }
}
</script>
<!-- Son.vue -->
<template>
    <div class="son">
        <p>
            这个是子组件
        </p> <!-- 可以在子组件内使用父组件传递过来的值 fatherInfo 这是一个对象 -->
            <ul>
              <li>
                  {{fatherInfo.fatherMsg}}-{{fatherInfo.fatherAge}}-{{fatherInfo.fatherJob}}
              </li>
            </ul>
        </p>
    </div>
</template>
<script>
export default {
    name: 'Father',
    data: function() {
        return {
            sonInfo: {
                sonMsg: "我是他儿子!",
                sonAge: "18岁",
                sonJob: "学生"
            }
        }
    },
//5. 接收来自父组件的数据 
props:{       
     fatherInfo:Object
}
</script>

父组件传值给子组件主要的步骤如下:
1. 在父组件内通过import导入子组件模块
2. 在父组件内注册子组件
3. 在父组件的模板内引入子组件标签
4. 在子组件标签上通过v-bind将父组件数值传递给子组件,v-bind绑定的属性,也即是后面子组件接收的属性
5. 在子组件模块脚本里面使用props接收传递过来的数值属性

因为,组件部分的data选项是一个函数,因此保证了父组件传递给子组件的数据都是独一份的(传值方式传递),不会让父组件以及其他子组件互相影响。

知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者:柴宏俊»