vue2.0 组件化及组件传值

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

组件A写法：

   <template>
   <div class="componentA"> ... </div> </template> <script> export default { data () { return { msg: 'component-A', } } } </script> <style> </style>

组件B写法：

   <template>
   <div class="message" id="componentB"> ... </div> </template> <script> import Vue from 'vue' export default Vue.component('my-component', { template: '#componentB ', data(){ return { msg: 'component-B', } } }) </script> <style> </style>

在父组件component
分别引用挂载

   <template>
  <div>
   <component-A></component-A> <component-B></component-B> </div> </template> <script> import componentA from './component-a.vue'; import componentB from './component-b.vue' export default { data () { return { } }, components:{ "component-A":componentA, "component-B":componentB } } </script> <style> </style>

10.2组件间传值

对于简单的父子组件或是同属同一父组件的兄弟组件之间的通信，vue提供了方法,没必要用到vuex

10.2.1 父组件向子组件传值：

父组件：

<component-A :logo="logoMsg"></component-A> //logoMsg是父组件data里的值

子组件：

   <template>
   <div class="componentA"> <div>{{logo}}</div> </div> </template> ... data(){ } props:["logo"], ...

10.2.2子组件调用父组件方法并向父组件传值：

父组件：

   
   <component-A :logo="logoMsg" @toParent="componenta"></component-A>
   ...
    methods:{
         componenta:function(data){ //data就是子组件传递过来的值 this.data1 = data } }

子组件：

     methods:{
        toParent:function(){
            this.$emit('toParent',this.data1) //调用父组件toParent方法，并传递参数 } }

效果图：

兄弟组件之间传值:在B组件修改父组件数据时。选择修改传给A组件的数据即可。

效果图：

10.2.3事件总线：不相关组件之间传递数据

bus.js文件：

   import Vue from 'vue'
   export default new Vue()

组件B $emit触发事件:

  import Bus from './bus.js' 
  ...  
   byBus:function(){ Bus.$emit('byBus',this.byBusData) }

组件A $on接受事件传递数据

    ...
    data(){
    },
    created(){
       Bus.$on('byBus',(data)=>{ this.busData = data }) },

效果图：