单页面Vue父子组件双向绑定传值
单页面Vue父子组件双向绑定传值
单页面发现使用子组件的this.$emit(update:inputdata,你好父组件！)，父组件通过:inputdata.sync="parentText"不生效，无法接收到子组件传递过来的参数，所以通过调用父级方法传递参数来实现双向绑定。
父组件(index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>组件化</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://unpkg.com/http-vue-loader" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="my-app">
<template>
父组件: <input type="text" v-model=inputText placeholder="请输入" />
<div>
{
{inputText}}
</div>
<my-component :inputdata=inputText></my-component>
</template>
</div>
<script type="text/javascript">
Vue.use(httpVueLoader);
new Vue({
el: #my-app,
components: {
my-component: httpVueLoader(./components/my-component.vue),
},
data() {
return {
inputText: 父文本
}
},
methods: {
parentFunct(value) {
this.inputText = value;
}
},
});
</script>
</body>
</html>
子组件(my-component.vue)
<template>
<div>
子组件:
<input type="text" v-model="childData" placeholder="请输入" @input="childDataInput()" />
<div>
{
{childData}}
</div>
</div>
</template>
<script>
module.exports = {
props: {
inputdata: {
type: String,
default:
},
},
data() {
return {
childData: this.inputdata
}
},
watch: {
inputdata() {
this.childData = this.inputdata
}
},
methods: {
childDataInput() {
if (this.$parent["parentFunct"]) {
this.$parent.parentFunct(this.childData)
}
}
}
}
</script>
<style>
.hello {
background-color: #ffe;
}
</style>
