vue组件传值

前言：在本文中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>