Vue组件传值，父传子，子传父，非父子组件

vue3中传值方式：

1、父组件向子组件传值

父组件Blog.vue

<template>
  <div id="blog">
     <Alert v-if="alert" v-bind:message="alert"></Alert>
  </div>
</template>
<script>
import Alert from './Alert'
export default {
    name: 'blog',
    data () {
        return {
            alert:'父组件向子组件传递的值'
        }
    },
    components:{
        Alert
    }
}
</script>    

 

子组件Alert.vue

<template>
  <div class="alert">
    {{message}}
  </div>
</template>

<script>
export default {
  name: 'alert',
  props:['message'],
  data () {
    return {
      
    }
  }
}
</script>

 

2、子组件向父组件传值

子组件child.vue

<template>
    <div class="child">
        <input v-on:click="sendValue" type="button" value="子组件向父组件传值">
    </div>
</template>
<script>
export default{
    data(){
        return {
            val:"子组件的value值"
        }
    },
    methods:{
        sendValue(){
            this.$emit('titleChanged',this.val);
        }
    }
}
</script>

titleChanged是父组件中绑定的函数名

父组件father.vue

<template>
    <div class="father">
        <h1>{{faval}}</h1>
        <child v-on:titleChanged="getValue"></child>
    </div>
</template>
<script>
import child from './child.vue'
export default{
    data(){
        return {
            faval:"Hello word!"
        }
    },
    components:{
        child
    },
    methods:{
        getValue(data){
            this.faval = data
            console.log(this.faval)
        }
    }
}
</script>

3、非父子组件传递值

非父子组件之间传值，需要定义工具文件eventHub.js进行传值，不然路由组件之间达不到传值的效果

组件之间传递参数工具类eventHub.js

import Vue from 'vue'

export default new Vue()

组件A向组件B传值

组件A.vue

<template>
    <div class="classA">
        <input type="button" value="A组件向B组件发送值" v-on:click="returnHome">
    </div>
</template>
<script>
import Hub from './eventHub.js'
export default{
    data(){
        return {
            msg:4
        }
    },
    methods:{
        returnHome(){
            Hub.$emit('val',this.msg)
        }
    }
}
</script>

组件B.vue

<template>
    <div class="classB">
        <h3>{{name}}</h3>
    </div>
</template>
<script>
import Hub from './eventHub.js'
export default{
    data(){
        return {
            name:''
        }
    },
    mounted:function(){
        var that = this
        Hub.$on('val',(data)=>{
            that.name = data
        })
    }
}
</script>