学习笔记
VUE父组件——子组件相互传值
2023-01-30
Vue
0

目录

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

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
},