单页面Vue父子组件双向绑定传值

最新推荐文章于 2023-07-18 10:59:54 发布

菜鸟阿奇

最新推荐文章于 2023-07-18 10:59:54 发布

阅读量357

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_51404058/article/details/126352436

版权

单页面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>