vue2 基础学习04 （Vue组件：父子组件之间的通信）

一、父子组件间的通信

父子组件间通信

• 一个简单的例子

  如图，下面有个目录结构：父组件下面有个子组件。

  我们要实现的就是：

  • 子组件接受父组件的data数据
  • 点击子组件中按钮，可以将子组件中数据反馈给父组件

  image

  直接上代码：

  style

         .parent {
            border: 1px solid red;
            width: 300px;
            height: 150px;
        }
  
        .child {
            background-color: lightgray;
            border: 1px solid green;
            width: 250px;
            height: 80px;
            margin-left: 20px
        }
  

  点击后效果如图：

  image

  箭头后面的即是从其他组件中传过来的数据

二、总结

• 父传子

  • 父用子的时候通过属性传递
  • 子要声明props:['属性名']来接收
  • 收到就是自己的了，随便你用
    • 在template中 直接用
    • 在js中 this.属性名 用

• 子传父

  • 子组件里通过$emit('自定义事件名',变量1，变量2)触发

  • 父组件@自定义事件名=‘事件名’监听

  • 如：

    子组件方法里 this.$emit('sendfather',val1,val2)触发自定义事件
    父组件里