Vue父组件和子组件之间传递数据

 

一、概念解析

挂载点： Vue实例的el属性对应的id，vue只会处理挂载点下面包含的内容
模板： 挂载点下面包含包含的标签就是模板
实例： 写上挂载点和模板等很多属性

<div id="root">
    <h1>{{msg}}</h1>
    <span></span>
</div>

 new Vue({              //new 了vue实例
        el:"#root"      //挂载点 id="root"的div，说明这个实例的范围在这个div里包含的内容
})

1、父组件向子组件传递数据
父组件通过属性向子组件传递数据
prop 是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"

<div id="app">
    <child message="hello!"></child>
</div>
 
<script>

// 子组件
Vue.component('child', {
  // 声明 props
  props: ['message'],
  template: '<span>{{ message }}</span>'
})

// 父组件
new Vue({
  el: '#app'
})
</script>

在上面的例子中定义了一个子组件child，子组件的message需要在 props属性里面显示声明，然后父组件通过message属性传了值“hello”，子组件就可以使用。

2、子组件向父组件传递数据
子组件向父组件传递数据通过监听 $emit 函数
订阅者模式：子组件触发一个函数，父组件监听这个函数。最终在父组件里定义函数处理

<div id="root">
        <div>
            <input v-model="inputValue" type="text">
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item
                    v-for="(item,index) of list"
                    :key="index"
                    :content="item"
                    :index="index"
                    @delete="handleDelete"      
            ></todo-item>
        </ul>
    </div>

<script>
    //子组件
    //子组件的模板是template定义的标签范围
    Vue.component('todo-item',{
        props:['content','index'],          //定义props，接收父组件传递的属性
        template:'<li @click="handleClick">{{content}}</li>',
        methods:{
            handleClick:function () {
                this.$emit('delete',this.index);   //当点击子组件的li触发delete事件
            }
        }
    })

    //父组件
    //父组件没有写template的内容，则它的模板就是挂载点容器下面包裹的所有
    new Vue({
        el:"#root",    //挂载点是id="root"的容器
        data:{
            inputValue:'',
            list:[]
        },
        methods:{
            handleSubmit:function () {
                this.list.push(this.inputValue);
                this.inputValue=''
            },
            handleDelete:function (index) {
                this.list.splice(index,1)
            }
        }
    })
</script>

···
在上面的代码里定义了，父组件、子组件。父组件通过props的方式向子组件传递数据，子组件通过触发事件的方式向父组件传递参数
下面三行代码是子组件向父组件传递参数的核心

解释说明：
@delete="handleDelete"          //父组件监听delete事件

this.$emit('delete',this.index);      //子组件发布delete事件，并且传递数据给父组件

handleDelete:function (index) {      //当父组件监听到时，拿到子组件带来的数据，进行的函数操作
                    this.list.splice(index,1)
                }