vue组件使用之父子间相互传值

飞熊 • 2023年12月19日下午9:24 • 后端漫谈 • 阅读 236

vue父子组件之间相互传值：

一、组件：

组件就是一个个vue文件。将一个网页拆成一个个模块写在不同的vue文件中。在主页面中进行拼接。

二、组件目录：

我们写的组件都放到:src/componets 目录下面

三、组件的使用：

组件是可以复用的

步骤：

(1)在componets目录下面定义一个vue文件；
(2)在父组件中引入子组件文件：
	<script>
    import content from "./components/Content.vue"
    </script>
(3)在父组件中引用子组件：
     components: {
 	   conte:content----》conte:组件名称；content组件文件名
   },
(4)使用：
  在父组件中<template>标签中使用，因为这个标签里面才能展示  
列：
<template>
	<div>		
		<conte></conte>
	</div>
</template>

四、组件中数据存放：

Vue中data必须是一个函数，而且返回值是一个对象，每次返回都是新的对象

五、父组件向子组件传值—-》单向传递

步骤：

1.定义父子组件关系；
2.通过prop 向子组件传递数据：
     在父组件页面中子组件的标签中通过v-bind来动态绑定我们要传递的数据；
3.在子组件中通过props获取；

例子：

在子组件标签中插入值：
（1）<hello :message='要传递过去的数据'>子组件标签</hello>

(2) 在data中定义要传过去的值：
    data(){
        return {
            msg:"hello";
         }
     }

(3)在子组件中获取：
exportdefault{
    props:['message']
}

注意：

在子组件中使用值：
(1).在<template></template>标签内直接使用：{{message}}

(2).在js标签中，则通过：this.message 获取值

2、props接受参数形式：

(1)、以字符串数组的形式:
   props:['title','like']
   
(2)、指定每个props值得类型，以对象的形式列出props：
    props:{
       title:String,
       author:Object
    }
    
(3)、在指定props值的类型，并且刚开始给他一个默认值
	
	props:{
     message:{
         type:String,------->类型
         default:"你好"-------->默认值
         required:true------------->表示传值的时候，一定要把message传过来
        }    
     }

六、子组件通过自定义事件向父组件传值：

父组件想拿到子组件的数据，需要通过自定义事件来获取

步骤：

// 1、在子组件中，通过$emit来触发事件
		sendParent:function(){
		//	this.$emit('自定义事件名称','发送的事件参数')
		this.$emit('injectMsg',this.msg)
		}
//------------------------------------------------------


		<!-- 2、在父组件中，通过v-on 监听子组件中自定义的事件 -->
		<conte @injectMsg="getChildMsg"></conte>
		
		getChildMsg:function(value) {
 		   alert(value);----->就是获取的子组件数据
 	    }

(1)、定义一个子组件页面：

<template>
	<div>
		<h2>你好啊</h2>
		<h2>{{text}}</h2>
		<button @click="sendParent">提交数据给父组件</button>
	</div>
</template>

<script>
	export default {
	data(){
		return{
			text:"子组件向父组件传值",
			msg:"helloworld"
		}
	},
	methods:{
		// 1、在子组件中，通过$emit来触发事件
		sendParent:function(){
		//	this.$emit('自定义事件名称','发送的事件参数')
		this.$emit('injectMsg',this.msg)
		}
	},
	}
	
</script>

(2)、定义一个父组件页面：

<script>
import content from "./components/Content.vue"

export default {
 data(){
	 return{
		  
	 };
 },
 methods: {
 	getChildMsg:function(value) {
 		alert(value);
 	}
 },
 components: {
 	conte:content
 },
}
</script>
<template>
	<div>
		<!-- 2、在父组件中，通过v-on 监听子组件中自定义的事件 -->
		<conte @injectMsg="getChildMsg"></conte>
	</div>
</template>
<style>
</style>