vue组件传值之（父子）

原文链接： https://juejin.im/post/5bcdda1f518825533c6805a5

⚠️组件的作用域是孤立的，vue解决组件传值问题是通过props

⚠️子传父的时候需要vm.$emit触发实例上的事件，页面需要定一个方法去取值

⚠️一定要注意命名方式和书写，例如mylChart和myl-chart    dataRadio和data-radio   :objline和@data-radio

⚠️一般情况下，父子传值 数据改变的时候，会引入页面刷新，如果不行试试用$watch调试下

准备阶段

1.页面导入组件

2.页面使用组件

this.chartLine='1';
复制代码

3.组件准备

取值阶段

  p:parent(页面)   c1:child1(组件)      c2:child2(组件)

父传子：

   页面定义：this.chartLine='父传子';

   组件取值：let childData=this.props）

子传父：

   子传父的时候，需要使用vm.$emit触发实例上的时间，附加参数会传给监听器回调。例如参数data-radio改变，将会触发页面上的radioChange方法，我们可以在这个方法里去做处理

组件定义：

 let onlyChart = {
          bol: this.bol,
          legend: this.legendOnly
        }
 this.$emit("data-radio", onlyChart);

复制代码

页面取值：

 radioChange(onlyChart) {
            this.radioBol = onlyChart.bol; 
            this.onlylegend = onlyChart.legend
      },
复制代码