vue父子组件相互传递数据

前言

vue父子组件之间相互传递数据应该是我们开发中最常见的场景。今天刚好有时间就写两个简单的小例子记录一下。

一、父组件向子组件传递数据

父组件向子组件传递数据相对简单，主要是通过props作为中间桥梁，下面是代码：

    <div id="app">
        <input v-model="msg">
        <child :message="msg"></child>
        <child1 v-for="item in arr" :text="item"></child1>
    </div>
        Vue.component('child',{
        props:['message'],
        template:'<p>{{message}}</p>'
    })
    Vue.component('child1',{
        props:['text'],
        template:'<li>{{text}}</li>'
    })
    new Vue({
        el:'#app',
        data(){
            return {
                msg:'zhang',
                arr:['js','css','html']
            }
        }
    })

运行结果：

二、子组件向父组件传递数据

子组件向父组件传递数据也并不麻烦，首先在子组件和父组件中各声明一个方法，然后在子组件方法中通过$emit函数触发父组件方法就可以实现了。下面这个例子是把在子组件input输入框输入的内容添加到父组件的一个集合中。

  <div id="app">
        <p v-for="item in arr">{{item}}</p>
        <m-component @handle="add"></m-component>
    </div>
  Vue.component('mComponent',{
        template:'<div>' +
            '<input v-model="msg">' +
                '<button @click="receive">send</button>'+
            '</div>',
        data(){
            return{
                msg:'zhang'
            }
        },
        methods:{
            receive(){
                this.$emit('handle',this.msg);
            }
        }
    })
    new Vue({
        el:'#app',
        data(){
            return {
                arr:[]
            }
        },
        methods:{
            add(arg){
                this.arr.push(arg);
            }
        }
    })

值得注意的是：$emit的第一个参数，那是我们自己定义的，在html中通过@参数名=父组件中的方法。
运行效果：

好啦，是不是感觉很简单，相信聪明的你一看就明白了。