Vue — 子组件改变父组件属性值的几种方法

Vue — 子组件改变父组件属性值的几种方法

dev7

1，props 配合 $emit 改变父组件传入的值

//父组件
<my-input :wranning.sync="wranning" />

//组件
$emit('update:wranning',val)

• 在父组件传入值时，需要有xxx.sync修饰符；
• 子组件可以在$emit('update:xxxx',val)，派发事件修改传入的值；

2，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事件