v-model双向绑定原理

标签：SonBox 绑定 value 双向 组件 input model

父组件代码如下：

<template>   <div>     我是父组件: <input type="text" v-model="msg">     <son-box v-model="msg"/>   </div> </template> <script> // 导入子组件 import SonBox from '@/components/son.vue' export default { name:'FatherBox', components:{     SonBox }, data(){     return{         msg:'测试内容'     } } } </script> 子组件代码如下： <template>   <div>     <!-- 子组件接收父传过来的数据，并侦听内容的更改状态 -->     我是子组件: <input type="text" :value="value" @input="changeValue($event.target.value)"/>   </div> </template>
<script> export default {   name: "SonBox",   props: {     value: {       required: true,     }   },    methods: {         changeValue(value){             // v-model语法糖，在设置子传父，时设置input事件，并携带value参数，修改父组件的数据实现双向数据绑定。             this.$emit('input',value) //触发input事件，父组件接收input事件         }     }, }; </script>

标签：SonBox,绑定,value,双向,组件,input,model
From： https://www.cnblogs.com/Metx/p/16961564.html