vue中的组件相关知识

1.全局组件

Vue.component('cpn', cpnC)//全局组件, 意味着可以在多个Vue的实例下面使用

2.局部组件

const app = new Vue({
    el: '#app',
    components: {
      cpn: cpnC // cpn 使用组件时的标签名,cpnC是构造器
    }
  })

3.为什么组件data必须是函数
组件不能访问vue实例的数据，Vue组件有自己存数据的地方
组件对象有一个data属性，data属性必须是函数
原因是每一个vue实例使用data中的属性时，如果data是对象，那么所有vue实例调用data都将指向同一个对象地址，会产生严重的组件数据干扰
而如果data属性是函数，每次vue实例调用data，都会创建一个新的不同的对象，其地址不同。

4.父组件向子组件传值

<div id="app">
        <com1 v-bind:parentmsg="msg"></com1>
    </div>
    <script>
        //父组件使用属性绑定的形式，将需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部
        var vm=new Vue({
            el:"#app",
            data:{
                msg: '父组件的数据'
            },
            methods: {},
            components: {
                com1: {
                    template: '<h1>这是子组件------{{parentmsg}}</h1>',
                    props:{
                        parentmsg:{
                            type:String,
                            default:'',
                        }
                        //还可以写成['parentmsg']
                    }
                }
            }
        })
    </script>

使用props和v-bind实现父向子组件传值
5.子组件向父组件传值
使用$emit和v-on

<div id="app">
        <child @csaylove="getLove;putlove"  > </child>
        <input type="text" v-model="pp">
    </div>
    <template id="child">
        <div>
            <button @click="csayLove">点击我</button>
        </div>        
    </template>

    <script>
        var vm=new Vue({
            el: '#app',
            data:{
                pp: ''
            },
            methods:{
                getLove: function(e){
                    console.log(e);
                    this.pp=e
                },
                putlove:function(e){
                    console.log(e+'222');
                }
            },
            components:{
                child:{
                    template:'#child',
                    data(){
                        return {
                            cmessage:'谢谢您'
                        }
                    },
                    methods:{
                        csayLove: function(){
                            this.$emit('csaylove', this.cmessage)//起名不能使用驼峰命名法
                        }

                    }
                }
            }
        })
    </script>

6.兄弟组件传值
（1）可以使用子传父再父传子
（2）使用Vuex来传值
（3）使用总线eventBus来传值
这里介绍常用的第三种方法——总线传值法

首先，新建一个Bus.js页面

// Bus.js
import Vue from 'vue';
export default new Vue();

接下来，哪个组件需要传值就需要引入它
哥哥向弟弟传值，则哥哥的方法中需要有一个函数来触发传值操作
弟弟接收值，则弟弟需要一个$on方法
哥哥组件如下：

<button @click="busFun">按钮</button> 点击按钮向弟弟传值

import Bus from "../api/Bus";   //注意引入
export default {
  data() {
    return {
      a: 1
    };
  },
  methods: {
    busFun() {
      Bus.$emit("chuanzhi", this.a++, "子组件向兄弟组件传值");   
 // 通过 $emit 来触发方法，参数1 是定义方法名，参数2 是你要发送的数据
    }
  }
};

弟弟组件如下：

import Bus from "../api/Bus";
export default {
  data() {
    return {
      c: "",
      d: ""
    };
  },
  created() {
    Bus.$on("chuanzhi", (val1, val2) => {    
      this.c = val1;
      this.d = val2;
    });
  },
  beforeDestroy() {
      bus.$off('停止');//将bus移除
    },
};

7.爷孙组件传值
从App->B->C
根组件的代码如下：

<template>
  <div id="app">
     <button @click="showDialogB">A组件</button>
    <B  v-if="isShow"></B>
  </div>
</template>

<script>
import B from './components/B'
export default {
  name: 'App',
  components: {
    B
  },
data(){
  return {
    isShow: false
  }
},
created() {
    this.$eventBus.$on('updateAccount', (data) => {
        console.log('bus')
        // this.customerAccountLoad()
    })
},
methods:{
    showDialogB() {
        this.isShow = true
    }
}
}
</script>

B组件代码如下；

<template>
<div>
  <button @click="showDialogC">我是B组件</button>
<C v-if="isShow"></C>
</div>
</template>

<script>
import C from './C'
export default {
   name: 'B',
  components: {
    C
  },
  data(){
  return {
    isShow: false
  }
},
methods:{
    showDialogC() {
        this.isShow = true
    },
}
}

C组件代码如下：

<template>
<div>
  <button @click="update">我是C组件</button>
</div>
</template>

<script>
export default {
  data(){
    return{
      data:'sa'
    }
  },
  methods:{
    update() {
    this.$eventBus.$emit('updateAccount',this.data)
}
  }
}

Event.js代码

import Vue from 'vue'
const eventBus = new Vue()
export default {
    install(target, options) {
        target.prototype.$eventBus = eventBus
    }
}

main.js

import eventBus from './eventBus'
Vue.use(eventBus);