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>