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

 

 

2018.05.19 19:56* 字数 367 阅读 23评论 0喜欢 0

一、概念解析

挂载点： Vue实例的el属性对应的id，vue只会处理挂载点下面包含的内容

模板： 挂载点下面包含包含的标签就是模板

实例： 写上挂载点和模板等很多属性

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

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

父组件通过属性向子组件传递数据

prop 是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"

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

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

子组件向父组件传递数据通过监听 $emit 函数

订阅者模式：子组件触发一个函数，父组件监听这个函数。最终在父组件里定义函数处理

      
        
       
 
         
        提交 
       
 
       
 
         
       
 
      

···

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

下面三行代码是子组件向父组件传递参数的核心

解释说明：@delete="handleDelete"          //父组件监听delete事件this.$emit('delete',this.index); //子组件发布delete事件，并且传递数据给父组件 handleDelete:function (index) { //当父组件监听到时，拿到子组件带来的数据，进行的函数操作 this.list.splice(index,1) }