Vue——父子组件数据传递

父向子通信

1. 传递：自定义属性（属性名任意，属性值为要传递的数据）
2. 接收子组件通过props接收父组件属性

示例代码

<div id="app">
    <h1>打个招呼：</h1>
    <!--使用子组件，同时传递title属性-->
    <introduce title="大家好，我是锋哥"/>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component("introduce",{
        // 直接使用props接收到的属性来渲染页面
        template:'<h1>{{title}}</h1>',
        props:['title'] // 通过props来接收一个父组件传递的属性，props只能是对象或数组
    })
    var app = new Vue({
        el:"#app"
    })
</script>

静态绑定

给 prop 传入一个静态的值： 只能是字符串类型

<introduce title="大家好，我是AA"/>

动态绑定

给 prop 传入一个动态的值： （通过v-bind从数据模型中，获取title的值）

<introduce :title="title"/>

props数据校验

当无需数据校验时props可以写为数组，需要数据校验时需要写为对象。

//数组形式
props:['title']

//对象形式
props: {
     items: {    //属性名
           type: Array,  //属性数据类型
           default: [],  //属性默认值
           required: true   //属性是否必须
     }
}

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

props中可以用于数据校验的类型有:String、Number、Boolean、Array、Object、Date、funcation、Symbol

子向父通信

子组件向父组件通信需要通过调用父组件的函数间接实现对data的影响。vue提供了一个内置的this.$emit()函数，用来调用父组件绑定的函数。

示例

<div id="app">
    <h2>num: {{num}}</h2>
    <counter :count="num" @inc="increment" @dec="decrement"></counter>
</div>
<script>
    Vue.component("counter", {
        template:'\
                <div>\
                    <button @click="plus">加</button>  \
                    <button @click="reduce">减</button>  \
                </div>',
        props:['count'],
        methods:{
            plus(){
                this.$emit("inc");
            },
            reduce(){
                this.$emit("dec");
            }
        }
    });
    var app = new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{ // 父组件中定义操作num的方法
            increment(){
                this.num++;
            },
            decrement(){
                this.num--;
            }
        }
    })
</script>   

 

在父组件中编写操作父data的函数

var app = new Vue({
    el:"#app",
    data:{
        num:0
    },
    methods:{ // 父组件中定义操作num的方法
        increment(){
            this.num++;
        },
        decrement(){
            this.num--;
        }
    }
})

把函数绑定到子组件标签上

<div id="app">
    <h2>num: {{num}}</h2>
    <counter :count="num" @inc="increment" @dec="decrement"></counter>
</div>

在子组件中编写子组件函数通过this.$emit()函数调用父组件的函数

 　　Vue.component("counter", {
            template:'\
                <div>\
                    <button @click="plus">加</button>  \
                    <button @click="reduce">减</button>  \
                </div>',
            props:['count'],
            methods:{
                plus(){
　　　　　　　　　　　　//this.$emit("inc",x1,....,x3)；其中inc为绑定在子组件标签上的自定义函数名，x1....x3依次为父组件函数所需要的参数
                    this.$emit("inc");
                },
                reduce(){
                    this.$emit("dec");
                }
            }
        })