目录
一、父子组建之间的传值
1.1 父组件向子组件传值
父组件向子组件传值是通过属性的方式 传值，传的值可以是任意类型，甚至可以是父组件的方法或者父组件对象本身。为方便理解可以简单将父组件向子组件传值按以下步骤实现。
1. 在父组件中引入子组件；
2. 并在components中注册子组件；
3. 通过属性向子组件中传值。
<template>
<div>
<!-- 使用子组件，通过属性向子组件传值，可以是任意值，方法，甚至是父组件对象this -->
<child title="父组件传过来的title" :parent-fun="parentFun" :parent="this"></child>
</div>
</template>
<script>
//1. 引入子组件
import child from './child.vue' export default {
data() {
return {}
}, //2.在父组件的components中注册子组件
components: {
child
},
methods: {
parentFun() {
console.log("这是父组件的方法");
}
}
}
</script>
<style></style>4. 在子组件中通过props属性接收父组件串过来的数据
<template>
<div>
<div>父组件通过字符串方式传过来的title --- {
{title}}</div>
<button @click="parentFun()">调用父组件的方法</button>
<div>通过父组件传过来的父组件对象调用的父组件的属性msg --- {
{parent.msg}}</div>
</div>
</template>
<script>
export default {
data() { return {} },
props: { // 4. 通过属性接收父组件传过来的数据，属性是parent-fun, props中可以使parentFun变量接收
title,
parentFun,
parent
}
}
</script>
<style></style>
注：以上所写的步骤是方便自己的记忆，实际开发中是先设计好子组件，子组件中已经定义好需要父组件在使用子组件时所需要的属性，父组件在调用子组件时按子组件定义的属性传值。
1.2 子组件向父组件传值
子组件向父组件传值是通过自定义事件的方式向父组件传值，为方便理解记忆，可按以下步骤：
1. 在子组件中通过子组件的$emit方法自定义事件向父组件传数据
<template>
<div>
<div>父组件通过字符串方式传过来的title --- {
{title}}</div>
<button @click="parentFun()">调用父组件的方法</button>
<div>通过父组件传过来的父组件对象调用的父组件的属性msg --- {
{parent.msg}}</div>
<button @click="sendMsgToParent()">点击向父组件传值</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: '这是子组件的msg'
}
},
props: { // 4.通过属性接收父组件传过来的数据，属性是parent-fun, props中可以使用parentFun变量接收
title,
parentFun,
parent
},
methods: {
sendMsgToParent() { //1.子组件通过子定义事件child-msg的方式将msg传给父组件
this.$emit('child-msg', this.msg)
}
}
}
</script>
<style></style>2. 父组件通过监听子组件自定义的事件获取子组件传的值
<template>
<div>
<!-- 使用子组件，通过属性向子组件传值 -->
<!-- 2.父组件通过监听子组件自定义的@child-msg事件获取子组件传过来的数据 -->
<child @child-msg="getChildMsg" title="父组件传过来的title" :parent-fun="parentFun" :parent="this"></child>
</div>
</template>
<script>
//1. 引入子组件
import child from './child.vue'
export default {
data() {
return {
parentMsg: '这是父组件的msg'
}
},
//2.在父组件的components中注册子组件
components: {
child
},
methods: {
parentFun() {
console.log("这是父组件的方法");
},
getChildMsg(msg) {
console.log("这就是子组件传过来的msg" + msg)
}
}
}
</script>
<style></style>父组件在组件上定义了一个自定义事件childFn，事件名为parentFn用于接受子组件传过来的message值。
<!-- 父组件 -->
<template>
<div class="test">
<test-com @childFn="parentFn"></test-com>
<br/>
子组件传来的值 : {
{message}}
</div>
</template>
<script>
export default {
data: {
message: ''
},
methods: {
parentFn(payload) {
this.message = payload;
}
}
}
</script>子组件是一个buttton按钮，并为其添加了一个click事件，当点击的时候使用$emit()触发事件，把message传给父组件。
<!-- 子组件 -->
<template>
<div class="testCom">
<input type="text" v-model="message" />
<button @click="click">Send</button>
</div>
</template>
<script>
export default {
data() {
return {
// 默认
message: '我是来自子组件的消息'
}
},
methods: {
click() {
this.$emit('childFn', this.message);
}
}
}
</script>这样我们就基本实现了子组件向父组件发送值了。
OK，这样不好记忆，我打个比方，
父向子传值：
父向子传值，可以比喻父亲给儿子说媒：
- 父亲先物色菇凉；（引入子组件）
- 然后将菇凉信息记录下来（components中注册子组件）
- 将菇凉信息发给儿子。（属性向子组件中传值） 儿子这边： 通过props属性(可以理解为接收到短信)，收到父亲发来的信息。 然后就交往了。
子向父传值：
子向父传值，可以比喻儿子自由恋爱：
- 儿子有出息，媳妇自己搞定，写email告诉父亲好消息（子组件的$emit方法自定义事件向父组件传数据）
- 父亲收到信，拆开信得到儿子的好消息（父组件通过监听子组件自定义的事件获取子组件传的值）
二、父子组件之间相互调用属性或方法
2.1 父组件调用子组件的属性或方法
父组件在使用子组件时可以通过Vue的ref属性获取到子组件对象，从而调用子组件的属性或方法，如下：
父组件：
<template>
<div>
<!-- 1. 通过ref属性表示自组件 -->
<v-child ref="vChild" @child-msg="getChildMsg" title="父组件传过来的title" :parent-fun="parentFun" :parent="this"></v-child>
<button @click="useChildMsg"></button>
</div>
</template>
<script>
//1. 引入子组件
import vChild from './v-child.vue'
export default {
data() {
return {}
},
components: {
vChild
},
methods: {
useChildMsg() {
//2. 通过DOM节点获取子组件对象，然后通过子组件对象调用子组件的属性或方法
let child = this.$refs.vChild
console.log(child.msg); //调用子组件的属性
child.showMsg() //调用子组件的方法
}
}
}
</script>
<style></style>子组件：
<template>
<div>
<div>这是v-child组件</div>
</div>
</template>
<script> export default {
data() {
return {
msg: '这是子组件的msg'
}
},
methods: {
showMsg() {
alert("这是v-child组件")
}
}
}
</script>
<style></style>2.2 子组件调用父组件的属性或方法
子组件调用父组件的方法或属性可以直接通过子组件对象的$parent属性获取父组件对象，从而调用父组件的属性或方法。如下：
子组件：
<template>
<div>
<div>这是v-child组件</div>
<button @click="getParentMsg"></button>
</div>
</template>
<script> export default {
data() {
return {
msg: '这是子组件的msg'
}
},
methods: {
showMsg() {
alert("这是v-child组件")
},
getParentMsg() {
let parent = this.$parent; //1.获取父组件对象
console.log(parent.msg); //2.调用父组件的属性
parent.showMsg() //3.调用父组件的方法
}
}
}
</script>
<style></style>父组件：
<template>
<div>
<!-- 1. 通过ref属性表示自组件 -->
<v-child ref="vChild" @child-msg="getChildMsg" title="父组件传过来的title" :parent-fun="parentFun" :parent="this"></v-child>
<button @click="useChildMsg"></button>
</div>
</template>
<script>
//1. 引入子组件
import vChild from './v-child.vue'
export default {
data() {
return {
msg: '这是父组件的msg'
}
},
components: {
vChild
},
methods: {
useChildMsg() { //2.通过DOM节点获取子组件对象，然后通过子组件对象调用子组件的属性或方法
let child = this.$refs.vChild
console.log(child.msg); //调用子组件的属性
child.showMsg() //调用子组件的方法
},
showMsg() {
alert('这是父组件的showMsg)
}
}
}
</script>
<style></style>OK，这样不好记忆，我打个比方，
父调子组件
简单记一句: 不养儿不知父母恩($refs)
子调父组件
简单记一句：我爸是李刚($parent )
三、总结
3.1 父子组件之间传值
- 父组件向子组件传值：通过属性传入，子组件通过props定义与传入属性相同的变量接收；
- 子组件向父组件传值：通过子组件的$emit自定义事件，父组件通过监听子组件定义的事件获取子组件传的值；
3.2 主动调用子组件或主动调用父组件的属性或方法
- 父组件主动调用子组件的属性或方法：通过父组件的$refs.子组件的ref属性值 来获取子组件对象，从而调用子组件的属性或方法；
- 子组件主动调用父组件的属性或方法：通过子组件的$parent 获取父组件对象，从而调用父组件的属性或方法