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

朱雀 2023-10-04 22:18 169阅读 0赞

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

### 一、组件： ###

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

![在这里插入图片描述][8ede32b320c048fabee5ca10aae6b338.png_pic_center]

### 二、组件目录： ###

我们写的组件都放到: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)
    		}
    //------------------------------------------------------
    
    
    		
    		<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)、定义一个父组件页面： ######

##### 解析过程： #####

（1）子组件:

![在这里插入图片描述][b7aaf5c2d8b240a8861ac3e4818d6a21.png_pic_center]

（2）父组件：

![在这里插入图片描述][cc95e9deaabb4e74bb3f79248b8d1ce4.png_pic_center]

[8ede32b320c048fabee5ca10aae6b338.png_pic_center]: https://img-blog.csdnimg.cn/8ede32b320c048fabee5ca10aae6b338.png#pic_center
[b7aaf5c2d8b240a8861ac3e4818d6a21.png_pic_center]: https://img-blog.csdnimg.cn/b7aaf5c2d8b240a8861ac3e4818d6a21.png#pic_center
[cc95e9deaabb4e74bb3f79248b8d1ce4.png_pic_center]: https://img-blog.csdnimg.cn/cc95e9deaabb4e74bb3f79248b8d1ce4.png#pic_center