vue项目中的组件传值方式

<template>
    <div id="parentBig">
        <Child :dmsg="msg"></Child>
    </div>
</template>
<script>
import child from '@/components/child'
export default {
    data(){
        return {
            msg:'要传递的信息'
        }
    },
    components:{
        Child
    }
}
</script>

<template>
    <div id="childBig">
        <h1>{{dmsg}}</h1>
    </div>
</template>
<script>
export default {
    props: ['dmsg'],// 使用props接收
    data(){
        return {
        }
    },
}
</script>

<template>
    <div id="childBig">
        <button @click="click1">点击</button>
    </div>
</template>
<script>
export default {
    data(){
        return { }
    },
    methods:{
        click1(){
            // 添加自定义事件
            // 参数1：自定义事件名(string形式)
            // 参数2：需要传递的值
            this.$emit('Dream', 'aaa')
        }
    }
}
</script>

<template>
    <div id="parentBig">
        <h1>{{title}}</h1>
        <child @Dream="fn"></child>
        <!-- @自定义事件名="调用的函数" -->
    </div>
</template>
<script>
import child from '@/components/child'
export default {
    data(){
        return {
            title:'文字ing'
        }
    },
    methods:{
        fn(res){
            console.log('接收自定义事件传的参数',res)
            this.title = '已更改为传来的参数：'+res
        }
    },
    components:{
        child
    }
}
</script>

import Vue from 'vue';
export default new Vue;

import bus from './bus.js'

<button @click="appmsg">bus传递data</button>

 methods:{
    appmsg(){
      bus.$emit('getonbus','App')
    }
  }

import bus from './bus.js'

data(){
    return{
      value:"Home"
    }
  }

mounted(){
    bus.$on('getonbus', val => {
      this.value = val
    })
  }

<p>{{value}}</p>

<template>
  <div class="home">
    <p>{{value}}</p>
    <parent :msga="a" :msgb="b" :msgc ="c"></parent>
  </div>
</template>
<script>
import parent from './parent.vue'
export default {
  name: 'home',
  components: {
    parent
  },
  data(){
    return{
      value:"Home",
      a:"aaa",
      b:"bbb",
      c:"ccc"
    }
  }
}
</script>

<template>
    <div>
        <child v-bind="$attrs"></child>
    </div>
</template>

mounted(){
            console.log(this.$attrs)
        }