Vue 中主要核心功能有两个,第一:数据绑定系统,第二:组件系统,在组件中经常会遇到子组件触发父组件事件,父组件调用子组件方法,我们称组件通信,组件通信可以分为两种:第一种父子组件通信,第二种非父子组件通信,下面文章主要讲解父子组件通信:
一.创建一个父组件Parent.vue添加如下代码
<template>
<div>
<h1>父组件</h1>
<h3>一.引用组件</h3>
<ul>
<li>一.1:使用 import 引入需要的组件</li>
<li>一.2. 注册组件</li>
<li>一.2.1: quote-child-components 是在template中使用的名子,不能使用驼峰,html不认识大小写</li>
<li>一.2.2: Child 是 import 组件的名字</li>
</ul>
<h3>二.父组件传递数据给子组件</h3>
<ul>
<li>二.1.在 data 中定义需要传递的数据</li>
<li>二.2.在template中引用子组件的地方使用v-bind(简写 ':')绑定数据</li>
<li>二.3.切换到 到 子组件(Child.vue)中使用props接收来自父组件的数据</li>
</ul>
<!--
二.4:注意:
二.4.1:使用 v-bind 绑定 要传递给子组件的数据
二.4.2:to-child-data : 给子组件的数据名字,必须短横线命名
二.4.3:在 child.vue 文件 props 属性中 接收来自父组件的数据
二.4.4:使用 toChildData 驼峰命名, 名字必须与父组件传递数名称一致 否则子组件接收不到数据
-->
<quote-child-components :to-child-data="msg" :from-msg="toChild" :id="idOne"></quote-child-components>
<h3>三.子组件与父组件通信</h3>
<ul>
<li>
<h4>说明:</h4>
<p>在vue中不允许子组件改变父组件数据，因为vue是单向数据传递，可以通过触发事件来通知父组件改变数据，从而达到改变子组件数据的目的.</p>
</li>
<li>三.1:转到子组件内</li>
<li>三.2:在子组件 定义触父组件的方法 "changeParentMethod"</li>
<li>三.3:在子组件 changeParentMethod 方法中 通过 $emit 属性 调用父组件方法</li>
<li>三.4:$emit 第一个参数 是 在父组件页面 引用 子组件的地方 定义的 供子组件触发方法的名称 responseChild 子父组件中定义名字必须一致</li>
<li>三.5:$emit 第二参数 带给父组件的数据</li>
<li>以上是在子组件做的事情 接下来转到父组件</li>
<li>三.6:父组件页面引入子组件</li>
<li>三.7:在父组件内定义一个供子组件触发的方法: ChengeParent</li>
<li>三.8:在父组件引用子组件的地方 使用 v-con(简写:@) 绑定 在子组件$emit内定义的方法名 responseChild 并调用父组件内的方法 : @responseChild="ChengeParent" </li>
<li>父组件数据被子组件修改:<span style="font-size:20px;color:red;font-weight:800;">{{ParentData}}</span></li>
</ul>
<quote-child-components :from-msg="toChild" @responseChild="ChengeParent" :id="idTwo"></quote-child-components>
</div>
</template>
<script>
//一.引用组件
// 一.1:使用 import 引入需要的组件
import Child from "./Child";
export default {
data() {
return {
msg: [1, 2, 3],
toChild: "我是被引用的子组件",
ParentData: 1,
idOne: 1,
idTwo: 2
};
},
methods: {
ChengeParent(event) {
this.ParentData++;
alert(event);
}
},
//一.2. 注册组件
components: {
// 一.2.1: quote-child-components 是在template中使用的名子,不能使用驼峰,html不认识大小写
// 一.2.2: Child 是 import 组件的名字
"quote-child-components": Child
}
};
</script>
<style scoped>
</style>二.创建子组件child.vue添加如下代码
<template>
<div>
<h1>子组件<span>({{fromMsg}})</span></h1>
<ul v-for="(item,index) in toChildData" :key="item.id">
<li>{{index}}:{{item}}</li>
</ul>
<div v-if="!(id==1)">
<h2>触发父组件方法</h2>
<!-- 三.1:定义触父组件的方法 "changeParentMethod -->
<button @click="changeParentMethod">修改父组件数据</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
props: {
toChildData: Array,
fromMsg: {
type: String,
default: ""
},
id: Number
},
methods: {
getMsg() {
//console.log(this.toChildData);
},
changeParentMethod() {
// 三.2:通过 $emit 调用父组件方法
// 三.3:第一个参数 在父组件 页面应用子组件的地方 定义的 供子组件触发方法的名称 responseChild
// 三.4:第二参数 带给父组件的数据
// 三.5:转到父组件
this.$emit("responseChild", "收到来自子组件的消息");
}
},
created() {
this.getMsg();
},
components: {}
};
</script>
<style>
</style>
可能 看着会有晕,没关系 点击这里
这是我个人学习Vue时做的练习,将项目下载到本地后 在终端中 执行 npm install 命令,等待项目依赖安装完成后,npm start 启动项目就可以了,页面中有详细的注释说明
注意:在 src/compontents/Parent-childComponentsCommunication中是完整的父子组件通信案例