xiaoba
1.父组件向子组件传递信息（单向、一对一）【通过props】
2.多个父组件引用同一个子组件（单向、多对一）【通过props】
3.子组件向父组件传递信息（反向、一对一）【通过子组件利用$emit触发事件，并传入新值给父组件】
1.父组件向子组件传递信息（单向、一对一）【通过props】
1. 创建父组件和子组件，不多说；
2. 在父组件里引入子组件，注册子组件，使用子组件
<template>
<p class="parentComp">
<h1>{{ msg }}</h1>
<ChildComp></ChildComp> //3.使用子组件
</p>
</template>
<script>
import ChildComp from '@/components/ChildComp' //1.引入子组件
export default {
name: 'ParentComp',
components: {ChildComp:ChildComp}, //2.注册子组件
data () {
return {
msg: '我是父组件'
}
}
}
</script>
3.先看父组件里面的代码，如下：
<template>
<p class="ParentComp">
<h1 @click="changeMsg">{{ msg }}</h1> // 3.给父组件的某个元素绑定事件
<ChildComp :infoFromParent="info"></ChildComp> // 4.给 被引用的子组件 绑定一个变量，变量的值即为父组件要改变的值
</p>
</template>
<script>
import ChildComp from '@/components/ChildComp'
export default {
name: 'ParentComp',
components: {ChildComp:ChildComp},
data () {
return {
msg: '我是父组件',
info: '我是来自父组件的信息' // 1.声明一个将要被父组件改变的变量
}
},
methods: {
changeMsg(){ // 2.写一个改变变量的方法
this.info = "父组件改变了信息"
}
}
}
</script>
4.再看子组件里的代码
<template>
<p class="ChildComp">
<h3>{{ msg }}</h3>
<p>{{infoFromParent}}</p> // 2.使用变量即可
</p>
</template>
<script>
export default {
name: 'ChildComp',
props:['infoFromParent'], // 1.重点来了：通过props建立与父组件之间的联系，其中'infoFromParentOne' 是父组件里为子组件绑定的变量
data () {
return {
msg: '我是子组件'
}
}
}
</script>
至此，父组件效果图应该是这样的，下图 子组件源没有任何变化，只是被引用的子组件发生变化
5.点一下 “我是父组件” 这行文字试试吧，效果如下
这样，子组件就顺利接收到了父组件的信息，实现父子组件单向通信
2.多个父组件引用同一个子组件（单向、多对一）【通过props】
这个原理和 一对一 是一样的，唯一不同之处就是在 子组件源 里建立多个与父组件的联系，分别对应相关的父组件（以下是子组件代码）：
<template>
<p class="ChildComp">
<h3>{{ msg }}</h3>
<p>{{infoFromParentOne}} {{infoFromParentTwo}}</p> // 2.使用变量
</p>
</template>
<script>
export default {
name: 'ChildComp',
props:['infoFromParentOne','infoFromParentTwo'], // 1.建立多个与不同父组件的联系
data () {
return {
msg: '我是子组件'
}
}
}
</script>
代码里使用变量时，虽然把两个变量写在一起了，但是显示效果只会根据引用关系一一对应，如下图：
所以，了解 一对一 之后，多对一 就很容易理解。
3.子组件向父组件传递信息（反向、一对一）【通过子组件利用$emit触发事件，并传入新值给父组件】
大致流程是这样的：子组件执行事件的同时，利用 $emit 触发 “被父组件监听的事件” ，父组件监听到之后，再去执行某个事件 接收由子组件传递过来的信息。1.看父组件代码：
<template>
<p class="ParentCompOne">
<h1 @click="changeMsg">{{ msg }}</h1>
<ChildComp @childEven="showInfoFromChild"></ChildComp> // 2.给子组件绑定这个事件
</p>
</template>
<script>
import ChildComp from '@/components/ChildComp'
export default {
name: 'ParentCompOne',
components: {ChildComp:ChildComp},
data () {
return {
msg: '我是父组件',
}
},
methods: {
showInfoFromChild(childInfo){ // 1.写一个方法，接受一个参数
alert(childInfo);
}
}
}
</script>
注释1：(参数形式可以是单个的值，也可以是数组)，这个参数的值即为子组件传递过来的值，这里参数用childInfo代替
注释2：“@childEven”的作用是让父组件监听“childEven”是否被触发，如果被触发了，就执行“showInfoFromChild”事件，那么在哪里触发呢？当然是在子组件里面。
2.看子组件代码：
<template>
<p class="ChildComp">
<h3>{{ msg }}</h3>
<button @click="transInfoToParent">点我给父组件传递信息</button> // 2.给子组件的元素绑定此事件
</p>
</template>
<script>
export default {
name: 'ChildComp',
data () {
return {
msg: '我是子组件',
childInfo:'我是来自子组件的信息，由于子组件触发了事件，所以才能把我传递给父组件'
}
},
methods: {
transInfoToParent(){ // 1.子组件里写了个方法
this.$emit("childEven", this.childInfo);
}
}
}
</script>
注释1：利用$emit去触发"childEven"，让父组件能够监听到"childEven"被触发了，注意：子组件的“childEven”和父组件的“childEven”名称一定要保持一致，如果是驼峰都要驼峰，如果是中横线都要中横线。 $emit方法后面跟的值“this.childInfo”即为要传给父组件的值。父组件通过方法里的参数接收值。
注释2：子组件绑定方法后，执行transInfoToParent方法的同时，也就触发了被监听的“childEven”，继而给父组件传值。
3.至此，代码完成，看一下效果：
相关阅读
问题描述iview是一个vue的组件库，用起来很好用，但是在使用notice和message的时候发现一个问题，就是按照文档的写法不能调用，文档中的
vue-component vue组件简介 组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建
一、JFrame的简单运用：package com.test1; import java.awt.*; import javax.swing.*; public class Demo1_1 extends JFrame{ //
echarts 评价: 5星（国产组件，达到这种高度，不多） 官网: http://echarts.baidu.com/ 说明: ECharts，一个纯 Javascript 的图表库，可以流
Android添加手机黑名单，手机来电拦截实现详解与Demo，一
简介 这是一个小应用的详解，这个应用可以添加手机黑名单，拦截手机黑名单的来电。通过这个小demo，我们可以对Android四大组件的应用