Vue中父组件和子组件的关系

深碍√TFBOYSˉ_ 2024-03-02 02:30 68阅读 0赞

#### 这里写目录标题 ####

*  一、父组件与子组件
 *   *  认识父组件、子组件案例1
     *  认识父组件、子组件案例2
 *  二、父组件往子组件中传数据
 *   *  1、子组件
     *  2、父组件（App）
     *  3、实现步骤
     *   *  1、子组件内部定义props接收传递过来的值
         *  2、父组件在使用子组件时通过属性将值传递给子组件
         *  子组件
         *  父组件（App）
         *  特别注意：子组件中不能操作父组件中传递过来的数据，只能访问
 *  三、子组件往父组件中传数据
 *   *  实现步骤：
     *   *  1、子组件中定义一个事件
         *  子组件
         *  父组件
     *  拓展

## 一、父组件与子组件 ##

### 认识父组件、子组件案例1 ###

在App.vue中导入了demo组件、注册了局部组件，并且用了demo的组件  
App.vue是父组件，demo.vue是子组件  
![在这里插入图片描述][35545b69ac114e90a385e3ba421519e0.png]

### 认识父组件、子组件案例2 ###

![在这里插入图片描述][5eb765cbf8b54494a35f25a1b27f318e.png]  
![在这里插入图片描述][6e67068d06344a41a377e8d297a6f3d5.png]

## 二、父组件往子组件中传数据 ##

**效果展示：stu1中的参数固定，不能动态变化，缺点很明显**

### 1、子组件 ###

<template>
    	<h1>班级{
        {
        cls}}</h1>
    	<table border="1">
    		<tr>
    			<th>学号</th>
    			<th>年领</th>
    			<th>名字</th>
    		</tr>
    		<tr v-for="item in stu1">
    			<td>{
        {
        item.id}}</td>
    			<td>{
        {
        item.name}}</td>
    			<td>{
        {
        item.age}}</td>
    		</tr>
    	</table>
    </template>
    
    <script>
    	export default{
        
    		data(){
        
    			return{
        
    				cls:"python1",
    				stu1:[
    					{
        id:1,name:'zs',age:18},
    					{
        id:2,name:'lisi',age:19},
    					{
        id:3,name:'ww',age:17}
    				]
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

### 2、父组件（App） ###

<template>
    	
    	
    	<mtable></mtable>
    </template>
    
    
    
    <script>
    import demo from './components/demo.vue';
    import mtable from './components/MyTable.vue';
    export default {
        
      name: 'App',
      components: {
        
    	demo,
    	mtable
      }
    };
    </script>
    
    <style>
    
    </style>

![在这里插入图片描述][8fe70cb3c0794e04a4452a37b84dc09e.png]

### 3、实现步骤 ###

#### 1、子组件内部定义props接收传递过来的值 ####

**props：父组件在使用时给子组件中的属性传递的值；  
props:\[‘cls’,‘stu1’\]：表示父组件中定义的值传给子组件中的cls和stu1**

#### 2、父组件在使用子组件时通过属性将值传递给子组件 ####

![在这里插入图片描述][3ce207a6221c4d4d814496a5942b31dc.png]

#### 子组件 ####

<template>
    	<h1>班级{
        {
        cls}}</h1>
    	<table border="1">
    		<tr>
    			<th>学号</th>
    			<th>年领</th>
    			<th>名字</th>
    		</tr>
    		<tr v-for="item in stu1">
    			<td>{
        {
        item.id}}</td>
    			<td>{
        {
        item.name}}</td>
    			<td>{
        {
        item.age}}</td>
    		</tr>
    	</table>
    </template>
    
    <script>
    	export default{
        
    		data(){
        
    			return{
        
    				}
    		},
    		props:['cls','stu1']
    	}
    </script>
    
    <style>
    </style>

#### 父组件（App） ####

<template>
    	
    	
    	
    	<mtable1 cls="python2" v-bind:stu1='stu1'></mtable1>
    	<mtable1 cls="python3" v-bind:stu1='stu2'></mtable1>
    </template>
    
    
    
    <script>
    import demo from './components/demo.vue';
    import mtable from './components/MyTable.vue';
    import mtable1 from './components/MyTable1.vue';
    export default {
        
      name: 'App',
      data(){
        
    	  return{
        
    		  stu1:[
    		  	{
        id:1,name:'zs',age:18},
    		  	{
        id:2,name:'lisi',age:19},
    		  	{
        id:3,name:'ww',age:17}
    		  ],
    		  stu2:[
    		  	{
        id:3,name:'zs',age:18},
    		  	{
        id:4,name:'lisi',age:19},
    		  	{
        id:5,name:'ww',age:17}
    		  ],
    	  }
      },
      components: {
        
    	demo,
    	mtable,
    	mtable1
      }
    };
    </script>
    
    <style>
    
    </style>

![在这里插入图片描述][912c7788250d43ea9eaa02d2d307eb1d.png]

#### 特别注意：子组件中不能操作父组件中传递过来的数据，只能访问 ####

## 三、子组件往父组件中传数据 ##

**原则：在子组件中最好不要修改父组件中传递过来的数据；数据源在那个组件中，删除操作就在那个组件中进行删除**

### 实现步骤： ###

#### 1、子组件中定义一个事件 ####

emit:['delete'],
    methods:{
        
    	//触发组件的delete事件
    	delRow(index){
        
    		this.$emit('delete',index)
    	}

#### 子组件 ####

> 当点击删除操作的时候  
> 子组件中会执行 @click="delRow(index)"这个函数

<template>
    	<h1>班级{
        {
        cls}}</h1>
    	<table border="1">
    		<tr>
    			<th>学号</th>
    			<th>年领</th>
    			<th>名字</th>
    			<th>操作</th>
    			
    		</tr>
    		<tr v-for="(item,index) in stu1">
    			<td>{
        {
        item.id}}</td>
    			<td>{
        {
        item.name}}</td>
    			<td>{
        {
        item.age}}</td>
    			<td><button @click="delRow(index)">删除</button></td>
    		</tr>
    	</table>
    </template>
    
    <script>
    	export default{
        
    		data(){
        
    			return{
        
    				}
    		},
    		//定义组件的属性（父组件使用时传递的属性）
    		props:['cls','stu1'],
    		//自定义组件的事件
    		emit:['delete'],
    		methods:{
        
    			// delRow(index){
        
    				//原则：在子组件中最好不要修改父组件中传递过来的数据
    				//index是要删除数据的索引
    			// }
    			
    			
    			//触发组件的delete事件
    			delRow(index){
        
    				this.$emit('delete',index)
    			}
    		}
    			
    	}
    </script>
    
    <style>
    </style>

#### 父组件 ####

> 执行步骤：  
> 父组件往子组件中传递cls和stu1值  
> 监听delete事件，当delete事件被触发时，会执行后面绑定的方法del

<template>
    	
    	
    	
    	
    	
    	<mtable2 @delete='del' cls='py6' :stu1="stu1"></mtable2>
    	<slotdemo>
    		<h3>111</h3>
    	</slotdemo>
    </template>
    
    
    
    <script>
    import demo from './components/demo.vue';
    import mtable from './components/MyTable.vue';
    import mtable1 from './components/MyTable1.vue';
    import mtable2 from './components/MyTable2.vue';
    import slotdemo from './components/SlotDemo.vue';
    export default {
        
      name: 'App',
      data(){
        
    	  return{
        
    		  stu1:[
    		  	{
        id:1,name:'zs',age:18},
    		  	{
        id:2,name:'lisi',age:19},
    		  	{
        id:3,name:'ww',age:17}
    		  ],
    		  stu2:[
    		  	{
        id:3,name:'zs',age:18},
    		  	{
        id:4,name:'lisi',age:19},
    		  	{
        id:5,name:'ww',age:17}
    		  ],
    	  }
      },
      methods:{
        
    	  // del:function(index){
        
    		 //  this.stu1.splice(index,1)
    	  // }
    	  del(index){
        
    		  this.stu1.splice(index,1)
    	  }
      },
      components: {
        
    	demo,
    	mtable,
    	mtable1,
    	mtable2,
    	slotdemo
      }
    };
    </script>
    
    <style>
    
    </style>

### 拓展 ###

**通过组件之间数据可知：  
父组件向子组件img传递了src和alt数据  
子组件中使用props进行接收**

**子组件中含有click事件，emit:\[‘delete’\],  
子组件向父组件传递delete事件**

[35545b69ac114e90a385e3ba421519e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/84ab80ecbed0418f8df5594dd7a454b4.png
[5eb765cbf8b54494a35f25a1b27f318e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/789535682f8944cdb6792954b4eda280.png
[6e67068d06344a41a377e8d297a6f3d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/1988ce5fd3e044bb842fe2b110e3e17b.png
[8fe70cb3c0794e04a4452a37b84dc09e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/18c9700232c74407b75a1a1f880be799.png
[3ce207a6221c4d4d814496a5942b31dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/e550e1b84e5a425eb3694d795d5d9183.png
[912c7788250d43ea9eaa02d2d307eb1d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/68a2cc043b254751870535fa820ca855.png