VUE父组件——子组件相互传值

注

父传子：在子组件中定义props(驼峰式)，在父组件对应的标签中添加对应的:子组件中props对应的值动态属性（横杠式）子传父：在子组件中使用this.$emit('标签中@后面的名称', 需要传的值)，在父组件对应的标签中添加对应的@子组件调用的名称事件

父组件向子组件传值

父组件

xml
<sku :sku-data="ruleForm.skuData" />

子组件

javascript
props: {
  skuData: { type: Array, default: null }
},

提示

如果子组件没有用v-if控制显隐，子组件可能会存在异步数据不显示问题，此时可以使用watch进行侦听例如：

javascript
watch: {
    skuData: {
      handler(val) {
        if (val.length > 0) {
          // 要进行的处理
        }
      },
      immediate: true
    },
}

子组件向父组件传值

子组件

javascript
this.$emit('changeData', this.ruleForm.connectorSkuList)

父组件

xml
<sku @changeData="changeSku" />

javascript
changeSku(skuData) {
  this.ruleForm.skuData = skuData
},

目录

VUE父组件——子组件相互传值

父组件向子组件传值

子组件向父组件传值