Vue 框架学习--4、Vue中父子组件相互传值并且通过插值方式输出

最新推荐文章于 2022-02-08 22:13:52 发布

VernierVicky

最新推荐文章于 2022-02-08 22:13:52 发布

阅读量542

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/VernierVicky/article/details/81450652

本文介绍了Vue项目中规范的父子组件数据传递方式，即父组件向子组件传递数据，子组件处理后抛出数据，父组件通过插值显示。以用户登录为例，演示了如何传递userId并获取相关用户信息，最终在父组件模板上展示。提供了一个父子组件嵌套的实际代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：Vue项目开发中，最规范的数值传递模式是

父组件向子组件传参------子组件监听处理数据抛出参数-----父组件接收参数并在父组件中通过插值方式显示数据

举个例子，我用户登录时父组件向子组件传递一个例如userId的数据比如说为1，那么子组件接收到后，索取所有userId为1的用户的数据，比如姓名、年龄，然后抛出数据，然后父组件通过插值的方式在父组件的模板上显示（也可以是双向绑定）

我们来看一个我写的实例

父组件：

<template>

<div>
    <button v-on:click="giveSaying">回答她</button>
    <love v-bind:message="saying"  v-on:giveAnswer="listenAnswer"></love>
    //giveAnswer是自定义事件用来接收由子组件抛出的值，具体方法在method给出定义
	<span v-show="show1">{{saying}}</span> //插值的方式显示，如果有特殊需求可使用v-model
	<br>
    <span v-show="show2">{{answer}}</span>
</div>

</template>
<script>
import love from '@/components/love'   //我们从该文件夹下引入该子组件
export default{
	name:'snow',
	data:function(){
		return{
            saying:'',
            answer:'',
            show1:false,
            show2:false
		}
	},
	components:{
		love:love
	},
	methods:{ 
//按钮事件，点击按钮改变saying，又因为saying与message是动态绑定，改变的同时直接向子组件传参
		giveSaying:function(){         
			this.saying="I still know something,I know I love you";
			this.show1=true;
		},
		listenAnswer:function(data){
			this.answer=data,
			this.show2=true
		}
	}
}
	


</script>

子组件：

<template>
<div>
	<span>you know nothing,jon snow</span>
	
</div>
</template>
<script>
	export default{
		name:'love',
		data:function(){
			return{
                love:''
			}
		},
		props:{
            message:{
            	type:String
            }
		},
		watch:{
//这里的监听事件至关重要，一旦message发生了改变，那么就触发下列事件
			message:function()
			{
				
				this.$emit("giveAnswer","marry me");
//通过this.$emit方法抛出数据giveAnswer对应父组件中子组件标签里的v-on
			}
		}
	}
</script>

这个父子组件嵌套，实现了插值显示与相互传值