子组件在传值的时候，选用input，如this.$emit(‘input’,val)，在父组件直接用v-model绑定，就可以获取到了
而子组件也可以通过$emit(‘input’,false)，去改变父组件中v-model 和 子组件中 value 的值 。
例子：
子组件
<template>
<div>
<div class="group">
<label>{{title}}</label>
<input type="text" placeholder="请输入" @input="changeData()" v-model="val">
</div>
</div>
</template>
<template>
<div>
<div class="group">
<label>{{title}}</label>
<input type="text" placeholder="请输入" @input="$emit('input', $event.target.value)" v-model="val">
</div>
</div>
</template>
<script>
export default {
props:["title"],
data () {
return {
val:""
}
},
methods:{
changeData:function(){
console.log(111);
this.$emit('input',this.val);
}
}
}
</script>
父组件：
<cmsGroup title="用户名" v-model="username"></cmsGroup>
其中，子组件this.$emit(‘input’,this.val); v-model 绑定的是 input 事件
vue 再父子组件传值时，除了传统的父组件 ：属性去传值外，还可以使用 父组件v-model传值，子组件props[‘value’]接收，
<!--父组件-->
<template>
<test v-model = "isShow"></test>
<button @click="isShow = !isShow">switch</button>
</template>
<script>
import test from '../test';
export default {
components: {
test
},
data() {
return {
isShow: false
}
}
}
</script>
<!--子组件-->
<template>
<div>
<div>{{value}}</div>
<Button @click="$emit('input',false)">关闭</Button>
</div>
</template>
<script type="text/ecmascript-6">
export default {
props:['value'],
mounted() {
console.log(this.value)
}
}
</script>
————————————————
版权声明：本文为CSDN博主「红孩儿2011」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_26642611/article/details/104055048