Vue父子组件通讯传值

最新推荐文章于 2024-04-22 20:28:12 发布

ZeroRockie

最新推荐文章于 2024-04-22 20:28:12 发布

阅读量165

点赞数

分类专栏：前端文章标签： Vue 组件通讯

本文链接：https://blog.csdn.net/qq_40181779/article/details/88932288

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Vue父子组件通讯传值

父组件往子组件传值

<body>
	<div id="App">
	    <!--可以采用v-bind动态传值-->
		<child :txt="msg"></child>
		<!--静态值(常量)-->
		<child txt="txt的属性值"></child>
		<!--采用默认值 前提是有设置-->
		<child></child>
	</div>
	<script>
		// 全局组件
		Vue.component("child",{
				template: "<p>{{txt}}</p>",
				props: {
					txt: {
						default: "组件自带的默认值"
					}
				}
			})
			
	    //props => Object || Array
		
		//组件传值
		let app = new Vue({
				el: "#App",
				data: {
					msg: "组件传值"
				}
			})
	</script>
</body>

子组件与父组件通信

方式1 采用中间件作为通讯中转站实现子组件往父级组件通讯传值的功能

<body>
	<div id="App">
		<em>电话次数: {{num}} </em>
	    <!--可以采用v-bind动态传值-->
		<child :txt="msg"></child>
		<!--静态值-->
		<child txt="txt的属性值"></child>
		<!--采用默认值 前提是有设置-->
		<child></child>
	</div>
	<script>

		let connectCar = new Vue();
		// 全局组件
		Vue.component("child",{
				template: "<p @click='callParent'>{{txt}}</p>",
				props: {
					txt: {
						default: "组件自带的默认值"
					}
				},
				methods: {
					callParent(){
						connectCar.$emit("call","Child发来信息了");
					}
				}
			})
		
		//组件传值
		let app = new Vue({
				el: "#App",
				data: {
					msg: "组件传值",
					num: 0
				},
				methods:{
					callChild(){
						connectCar.$on("call",msg => {
							console.log(msg);
							this.num ++;
						})
					}
				}
			})
		// 建立通信连接
		app.callChild();
	</script>
</body>

利用自定义事件实现子组件与父组件通讯

<body>
	<div id="App">
		<em>电话次数: {{num}} </em>
	    <!--可以采用v-bind动态传值-->
		<child :txt="msg" @call="callChild"></child>
		<!--静态值-->
		<child txt="txt的属性值" @call="callChild"></child>
		<!--采用默认值 前提是有设置-->
		<child @call="callChild"></child>
	</div>
	<script>

		let connectCar = new Vue();
		// 全局组件
		Vue.component("child",{
				template: "<p @click='callParent'>{{txt}}</p>",
				props: {
					txt: {
						default: "组件自带的默认值"
					}
				},
				methods: {
					callParent(){
						this.$emit("call","Child发来信息了");
					}
				}
			})
		
		//组件传值
		let app = new Vue({
				el: "#App",
				data: {
					msg: "组件传值",
					num: 0
				},
				methods:{
					callChild(msg){
						console.log(msg);
						this.num ++;
					}
				}
			})
	</script>
</body>