在vue2使用v-model对组件进行双向绑定

1. 默认情况

v-model=“visible” 等价于 :value=“visible” 加上 @input=“visible = $event”

所以 v-model 就是父组件向子组件传了个 value 字段的值，子组件使用 props 定义 value 字段， 就可以在子组件使用 value 读取这个值；子组件使用 $emit(‘input’,值) 就可以改变 v-model 的值
父组件

<template>  <div id="app">    <Tab v-model="visible" />  </div></template><script>import Tab from "./components/Tab.vue"export default {  name: "App",  data() {    return {      visible: true,    }  },  components: { Tab },}</script><style></style><script/>

子组件

<template>  <div v-show="value">    我是子组件文字    <button @click="$emit('input', false)">关闭</button>  </div></template><script>export default {  props: {    value: {      type: Boolean,      default: false,    },  },}</script>

2. 子组件改变默认字段名与事件

父组件

<template>  <div id="app">    <Tab v-model="visible" />  </div></template><script>import Tab from "./components/Tab.vue"export default {  name: "App",  data() {    return {      visible: true,    }  },  components: { Tab },}</script><style></style>

子组件

<template>  <div v-show="show">    我是子组件文字    <button @click="$emit('change', false)">关闭</button>  </div></template><script>export default {  model: {    prop: "show",    event: "change",  },  props: {    show: {      type: Boolean,      default: false,    },  },}</script>

子组件定义了以下代码就回改变默认字段

    model: {       prop: "show",       event: "change",    }

此时，v-model=“visible” 等价于 :show=“visible” 加上 @change=“visible = $event”

本文链接：https://www.kjpai.cn/news/2024-04-01/152356.html，文章来源：网络cs，作者：康由，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！