vue子组件给父组件传属性

1.普通属性传递方式

子组件通过this.$emit('update:属性名',属性值)修改父组件的值

1.组件内获取修改后的属性

使用sync方法获取修改后属性

<template>
......
<j-select-number-modal
       v-model="selectValue"
      :visible.sync="visible"
      :width="800"
      @options="handleOptions"
    >
......
</template>
<script>
.....
    data() {
      return {
        visible: false
    }
}
.....
</script>

2.子组件使用(通过this.$emit('update:属性键',属性值))

....
methods: {
    handleCancel() {
      this.$emit('update:visible',false)
    },
}
....

2.通过input传递参数

子组件在传值的时候，选用input，如this.$emit(‘input’,val)，在父组件直接用v-model绑定，就可以获取到了

1.父组件通过v-model方式获取参数

<template>
......
<a-col :md="5" :sm="24">
      <address-list-left v-model="currentOrgCode"/>
    </a-col>
......
</template>
<script>
.....
    data() {
      return {
         currentOrgCode: ''
      }
    },
.....
</script>

2.子组件通过触发input事件，改变属性值

<script>
.....
emitInput(orgCode) {
        this.$emit('input', orgCode)
      },
....
</script>

3.其他常用事件

子组件的this.$emit('change', orgCode)会触发父组件change事件

父组件
 <j-dict-select-tag  @change="handleChangeTemplateType" :triggerChange="true" 
dictCode="msgType" v-decorator="['templateType', validatorRules.templateType ]" 
placeholder="请选择模板类型">
</j-dict-select-tag>

子组件
this.$emit('change', val);