Vue——子组件改变父组件属性值的三种方法（一刷完成）

子组件向父组件传值，达到改变父组件属性值的两种方法

---

1. ##### props配合$emit改变父组件值

这是一个弹窗显示和隐藏的组件

子组件
html:
        <el-button @click="$emit('update:showDlg',false)">
            取消
        </el-button>


父组件
html:
        <AddBtn :showDlg.sync= 'showDlg'></AddBtn>
js:
        showDlg: false

• [ ] 父组件必须有.sync修饰符
• [ ] 子组件中showDlg应该是父组件props传入的数据

• [ ] 子组件中不应该直接用showDlg来控制弹窗的显示和隐藏，避免直接依赖父组件的值，可以在data中定义自己的私有属性，并监听父组件中传入的值，动态改变私有属性

  1. $on配合$emit

父组件:
    <template>
      <parent @change-type="onChangeType"></parent>
    </template>
    <script>
      data () {
       return {
        types: 0,
      },
      methods: {
       onChangeType (type) { // type是子组件$emit传递的参数
        this.types = type
       }
      }
    </script>

子组件:
    <template>
     <div>
      <span @click="changeFn(0)"></span>
      <span @click="changeFn(1)"></span>
      <span @click="changeFn(2)"></span>
     </div>
    </template>
    <script>
      data () {
       return {
        types: 0,
      },
      methods: {
        changeFn (type) {
          this.types = type
          this.$emit('change-type', type) // 用来触发父组件定义的@change-type
       }
      }
    </script>

• [ ] $emit调用父组件方法，接收两个参数[父组件方法名，传递的参数]
• [ ] 父组件中$on绑定的方法名应该同步于$emit调用的

• [ ] 缺点是父组件必须存在此方法，否则会报错

  1. V-model配合input事件

父组件:
    <template>
      <parent v-model="onChangeType"></parent>
    </template>

子组件:
    <template>
     <div>
      <span @click="changeFn(0)"></span>
     </div>
    </template>
    <script>
      data () {
       return {
      },
      methods: {
        changeFn (type) {
          this.$emit('input', type) // 用来触发父组件定义的@input
       }
      }
    </script>

• [ ] v-model原则上也是利用$emit以及$on
• [ ] v-model会默认绑定input事件