vue - 父子组件之间的传值以及非父子组件之间的传值

不念不忘少年蓝@ 2021-09-29 12:12 413阅读 0赞

父子组件传值在项目中非常常用的，一般遇到一样的模块，我们都会考虑做成一个公共组件，多个页面一起使用。同时，我们偶尔也会遇到非父子组件传值这种情况。下面我来介绍一下它们之间是怎么传值的。

### 1、父组件向子组件传值 ###

父组件向子组件传值时，子组件是通过 props 来接收父组件传递过来的参数的，下面举个例子：

**子组件：**

<template>
    		        <div id="banner" class="headers">
    		            <header class="bar-nav">
    		                <h1 class="m-title">{
       {title}}</h1>
    		            </header>
    		        </div>
    		    </template>
    		    <script>
    		        export default {
    		            data() {
    		                return { };
    		            },
    		            props: {
    		            	title: {
    			                type: String
    			            }
    		            }
    		        };
    		    </script>

**父组件：**

<template>
    		      <div class="atags">
    		        <Header :title="headtitle" class="noheader"></Header>
    		      </div>
    		    </template>
    		    <script>
    		    import Header from "../../components/header/header";
    		    import Vue from "vue";
    		    export default {
    			     data() {
    			        return {
    			          headtitle: ‘我是标题’
    			        };
    			      },
    			      components: {
    			        Header
    			      }
    		    };
    		    </script>

### 2、子组件向父组件传值 ###

子组件向父组件传值中，子组件是通过 $emit 向父组件传递参数的，下面举个例子：

**子组件：**

<template>
    		        <div id="banner" class="headers">
    		            <header>
    		                <a class="left-nav" @click="linked">返回</a>
    		                <div class="search">
    			                <input class="search_input" type="text" v-model="keyword" placeholder="输入关键字进行搜索">
    			            </div>
    		            </header>
    		        </div>
    		    </template>
    		    <script>
    		        export default {
    		            data() {
    		                return {
    		                	keyword: '',
    		                };
    		            }，
    		            watch: {
    			            keyword(value) {
    			            	// 传递参数的情况
    			                this.$emit('getKeyword', this.keyword);
    			            }
    			        },
    		            methods: {
    		                linked() {
    		                	// 传递事件的情况 （若传递事件的时候需要传递参数的话，可以直接在后面加上对应的参数）
    		                    this.$emit("linked");
    		                }
    		            }
    		        };
    		    </script>

**父组件：**

<template>
    		        <div class="searchpage">
    		        	
    		            <Header @getKeyword="getKeyword" @linked="linked"></Header>
    		        </div>
    		    </template>
    		    
    		    <script>
    		        import Header from '../../components/header/header'; 
    		        export default {
    		            data() {
    		                return {
    		                    keyword:'',
    		                    desc:''
    		                }
    		            },
    		    
    		            components:{
    		                Header
    		            },
    		            methods:{
    		            	// 接收传递过来的参数
    		                getKeyword(value){
    		                    this.keyword = value;
    		                }，
    		                // 接收传递过来的事件方法
    		                linked(){
    			                this.desc='您还未保存，确认退出吗？';
    			            }
    		            }
    		        }
    		    </script>

### 3、非父子组件传值 ###

前面我提到的**使用$on和$emit相结合关闭弹框**的方法其实就是使用了非父子组件传值的方式来实现的。而非父子组件的传值关系呢就是子组件通过使用$on来接收来自非父组件传递过来的方法以及参数，而非父组件呢就是使用$emit来和子组件建立联系的。可能我解释的并不是很清楚，我下面还是直接使用例子来表达吧。  
    **utils.js：**

// 特别注意：在非父子组件传值的时候必须引入vue
    		    import Vue from 'vue';
    		    export default new Vue;

**子组件：**

<template>
    		        <div class="sort">
    		        	<span class="text">{
       {Name}}</span>
    		        </div>
    		    </template>
    		    
    		    <script>
    		        import utils from '../../libs/Utils/utils';
    		        export default {
    		            name: 'sorting',
    		            data() {
    		                return {
    		                	Name:''
    		                }
    		            },
    		            mounted(){
    		            	// 有参数时就接收参数，没有参数则不需要接收
    		                utils.$on('delsign',(item,index)=>{
    		                    console.log(item);
    		                     console.log(index);
    		                     this.Name = item.Name;
    		                })
    		            }
    		        }
    		    </script>

**父组件：**

<template>
    		      <div class="templatecreate">
    		         <div class="navs">
    		         	<span class="lt">{
       {currItem.id}}</div>
    		         	<div class="mts">{
       {currItem.name}}</div>
    		         	<div class="rt">{
       {currItem.canDelete}}</div>
    				 </div>
    		      </div>
    		    </template>
    		    
    		    <script>
    			    import utils from "../../libs/Utils/utils";
    			    export default {
    			      data() {
    			        return {
    			          currItem: {
    			         	  id: 2,
    			              name: "haha",
    			              canDelete: false
    			           },
    			          currIndex: "2"
    			        };
    			      },
    			      methods: {
    			        confirm() {
    			            let item = this.currItem;
    			            let index = this.currIndex;
    			            
    			            // 有参数需要传递时就写对应的参数进去，没有参数传值的话可以不传
    			            // 注意：  delsign 这个名称要和 子组件那边的保持一致
    			            utils.$emit("delsign", item, index);
    			        }
    			      }
    			    };
    		    </script>