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

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事件
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容