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>