子组件通过input框修改父组件数据
用到了.sync双向绑定数据
父组件:<coment-children v-if="show" :isShow.sync="show" :isTxt.sync="fathertxt"></coment-children>
子组件:this.$emit('update:isTxt', this.childtxt)
一、child.vue代码如下:
<template>
<div style="width:200px;height:200px;background:red;">
我是helloWorld模块的子组件
<button @click="$emit('update:isShow',false)">我是子组件的按钮点我隐身</button>
<input v-model.lazy="childtxt" />
<br />
{{childtxt}}
<hr />
<input type="text" value="1" v-on:input="inputFunc" />
</div>
</template>
<script>
export default {
data() {
return {
childtxt: ''
}
},
watch: {
childtxt(newValue) {
console.log(newValue);
this.$emit('update:isTxt', this.childtxt)
}
},
methods: {
inputFunc() {
console.log(this.childtxt)
}
}
}
</script>
二、father.vue代码如下:
<template>
<div>
<button @click="show = true">我是父组件的按钮</button>
<coment-children v-if="show" :isShow.sync="show" :isTxt.sync="fathertxt"></coment-children>
{{fathertxt}}
</div>
</template>
<script>
import comentChildren from "./children";
export default {
data() {
return {
show: false,
fathertxt: 'fathertxt'
}
},
components: {
comentChildren
}
};
</script>