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

zsd_666

已于 2023-07-15 08:16:14 修改

阅读量377

点赞数

文章标签： vue.js javascript 前端

于 2023-06-28 21:45:26 首次发布

原文链接：www.baidu.com

版权

文章介绍了在Vue.js中父子组件间通信的两种方式。方式一是通过自定义事件和model属性，子组件监听input事件并更新值，父组件通过v-model绑定。方式二是使用props和v-model，子组件内部改变值时触发input事件通知父组件更新。

摘要由CSDN通过智能技术生成

文章目录

方式一:
- 自定义子组件
- 父组件
方式二:

方式一:

自定义子组件

<template>
  <input type="search" @input="changeInput" data-myValue="">
</template>

<script>
export default {
  name: 'CustomModel',
  model: {
    prop: 'myValue', 
    event: 'myInput', 
  },
  props: {
    myValue: [String, Number],
  },
  methods: {
    changeInput ($event) {
      this.$emit('myInput', $event.target.value)
    },
  }
}
</script>

父组件

<template>
  <div class="home">
    <h3>输入的实时内容：{{ myValue }}</h3>
    <custom-model v-model="myValue"></custom-model>
  </div>
</template>
<script>
import CustomModel from './CustomModel'
export default {
  name: 'Home',
  components: {
    CustomModel,
  },
  data () {
    return {
      myValue: ''
    }
  },
}
</script>

方式二:

子组件

<template>
  <div>
    <input type="text" v-model="currentValue" />
    <div>{{ currentValue }}</div>
    <button @click="handleAdd">子组件改变值</button>
  </div>
</template> 
<script>
export default {
  props: {
    // 接收一个由父级组件传递过来的值
    value: {
      type: String,
      default: function () {
        return "";
      },
    },
  },
  computed: {
    currentValue: {
      // 动态计算currentValue的值
      get: function () {
        return this.value; // 将props中的value赋值给currentValue
      },
      set: function (val) {
        this.$emit("input", val); // 通过$emit触发父组件
      },
    },
  },
  methods: {
    // 改变值
    handleAdd() {
      this.currentValue = parseInt(this.currentValue) + 1 + "";
    },
  },
};
</script>

父组件

<template>
  <div>
    <Child v-model="test"></Child>
    <div>{{ "父组件获取得值:" + test }}</div>
  </div>
</template> 

<style>
</style> 

<script>
import Child from "./child.vue";

export default {
  components: {
    Child,
  },
  data() {
    return {
      test: "666",
    };
  },
};
</script>