vue中的this.$emit(‘input‘,this.val)；是什么意思?

叁歲伎倆 2023-10-11 15:56 15阅读 0赞

子组件在传值的时候，选用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>

<cmsGroup title="用户名" v-model="username"></cmsGroup>  
1  
其中，子组件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>