vue的自定义组件使用v-model

最新推荐文章于 2024-07-02 14:37:41 发布

lancnn

最新推荐文章于 2024-07-02 14:37:41 发布

阅读量163

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_41767649/article/details/107104901

版权

在父组件中, 给children组件定义一个saySomeThing:

<template>
<div class="home">
  <p>{{saySomeThing}}</p>
  <Children v-model="saySomeThing" />
</div>
</template>

<script>
import Children from '@/components/Children.vue'

export default {
  name: 'Home',
  components: {
    Children
  },
  data() {
    return {
      saySomeThing: 'saySomeThing'
    }
  }
}
</script>

在子组件中，更改saySomeThing的值：

<template>
<div class="hello">
  <button type="button" name="button" @click='toParent'>点击回应</button>
</div>
</template>

<script>
export default {
  name: 'parent',
  props: {
    saySomeThing: String
  },
  methods: {
    toParent() {
      this.$emit('input', '哈哈哈哈哈哈')
    }
  }
}
</script>

<style scoped lang="scss">
</style>

在子组件中主要是通过this.$emit('input', '哈哈哈哈哈哈') 来更改saySomeThing的值。