前言:在本文中App.vue是父组件,HelloWorld.vue是子组件
一、父组件向子组件传值
1、props
父组件 App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
在子组件上直接使用自定义属性进行传值---- 属性名=要传递的值,例:msg="Welcome to Your Vue.js App"
子组件 HelloWorld.vue
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data(){
return{
firstName:"LeeYuFan"
}
},
}
</script>
在子组件中使用props进行接收参数。属性名和父组件自定义的属性名一致。props可以是数组类型也可以是对象类型。
2、$parent访问父组件
在子组件通通过$parent可以访问到父组件,从而获取父组件中的变量与方法。
子组件
<script>
export default {
name: 'HelloWorld',
props: {
msg: String //接收父组件传递过来的值
},
data(){
return{
firstName:"LeeYuFan", //定义firstName变量
curYear:""
}
},
mounted(){
this.curYear = this.$parent.year //读取父组件year变量的值赋值给cueYear
this.$parent.getNum() //调用父组件的函数
console.log(this.curYear)
}
}
</script>
二、子组件向父组件传值
1、自定义事件
在子组件中通过$emit()定义事件
<script>
export default {
name: 'HelloWorld',
props: {
msg: String //接收父组件传递过来的值
},
data(){
return{
firstName:"LeeYuFan", //定义firstName变量
}
},
mounted(){
this.$emit('sendMessage',this.firstName) //定义事件名和传递参数
}
}
</script>
在父组件中监听事件,接收参数
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App" @sendMessage="reMessage"/> <!--监听sendMessage事件-->
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
data(){
return{
year:'2023'
}
},
components: {
HelloWorld
},
methods:{
reMessage(val){
console.log(val,'子组件传递过来的值') //接收参数
}
}
}
</script>
2、$children访问子组件
通过$children可以在父组件中访问子组件的变量与方法,this.$children是一个数组类型,它包含所有子组件对象
父组件 App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> <!--父组件向子组件传值msg-->
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
mounted(){
console.log(this.$children[0].msg,'------',this.$children[0].firstName) //访问子组件中的的msg和firstName变量
}
}
</script>
HelloWorld.vue组件
<script>
export default {
name: 'HelloWorld',
props: {
msg: String //接收父组件传递过来的值
},
data(){
return{
firstName:"LeeYuFan" //定义firstName变量
}
},
}
</script>
3、兄弟组件之间进行传值
在vue2.x中,兄弟组件间数据共享的方案是EventBus
EventBus的使用步骤
-- 创建EventBus.js模块,并向外共享一个vue的实例对象
-- 在数据接收方,调用bus.$on('事件名称',事件处理函数)监听自定义事件
-- 在数据发送发,调用bus.$emit('事件名称',要发送的数据)方法触发自定义事件
EventBus.js模块
import Vue from 'vue'
export default new Vue()
数据发送方 ComTest.vue组件
<script>
import bus from "../utils/EventBus.js" //导入EventBus
export default{
// name:'ComTest',
data(){
return{
message:"2023年平安喜乐!"
}
},
mounted(){
bus.$emit('sendMessage',this.message)
}
}
</script>
数据接收方 HelloWorld.vue
<script>
import bus from "../utils/EventBus.js"
export default {
name: 'HelloWorld',
props: {
msg: String //接收父组件传递过来的值
},
data(){
return{
firstName:"LeeYuFan", //定义firstName变量
}
},
mounted(){
bus.$on('sendMessage',val=>{
console.log(val)
})
},
}
</script>
在vue3.x中兄弟组件间传值使用mitt
mitt使用步骤
安装mitt依赖
npm install mitt -S
-- 创建mitt.js模块,在组件间中引入
-- 数据发送方,调用mitt.emit('自定义事件',要传递的值)
--数据接收方,调用mitt.on('事件名',事件处理函数)
创建mitt.js模块
import mitt from 'mitt'
export default new mitt()
数据发送方
<script>
import mitt from '../utils/mitt.js';
export default{
// name:'ComTest',
data(){
return{
message:"2023年平安喜乐!"
}
},
mounted(){
mitt.emit('sendMessage',this.message)
}
}
</script>
数据接收方
<script>
import mitt from '../utils/mitt.js';
export default {
name: 'HelloWorld',
props: {
msg: String //接收父组件传递过来的值
},
data(){
return{
firstName:"LeeYuFan", //定义firstName变量
}
},
mounted(){
mitt.on('sendMessage',val=>{
console.log(val,'comtest组件传递过来的值')
})
},
beforeDestroy(){
mitt.off("sendMessage")
}
}
mitt.off()是销毁事件监听的,使用mitt.on()监听的事件会累加。
2、使用refs进行组件间传值
在父组件中通过ref属性给子组件进行标记,然后通过this.$refs.组件的标记名称读取组件中的变量/方法,并存储。然后通过父组件向子组件传值(props)
App.vue组件(中间传输介质)
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld :msg=msg />
<ComTest ref="comtest"/> <!--通过ref给组件标记-->
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import ComTest from './components/ComTest.vue'
export default {
name: 'App',
data(){
return{
year:'2023',
msg:''
}
},
components: {
HelloWorld,
ComTest
},
mounted(){
this.msg = this.$refs.comtest.message //通过$refs.comtest读取comtest组件的变量或方法
},
methods:{
reMessage(val){
console.log(val,'子组件传递过来的值') //接收参数
}
}
}
</script>
HelloWorld.vue组件(数据接收方)
<script>
export default {
name: 'HelloWorld',
props: {
msg: String //接收父组件传递过来的值
},
watch:{
msg(val){
console.log(val,'~~~~~~~') //接收comtest传递给父组件的值,然后父组件传给HelloWorld.vue组件的值
}
}
}
</script>
ComTest.vue组件(数据发送方)
<script>
export default{
name:'ComTest',
data(){
return{
message:"2023年平安喜乐!"
}
},
}
</script>