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