【vue】组件

组件传值

1.父传子 
              父中
                     v-bind : 子中props的某个需要被传的属性名 = '父中需要传的值'；
              子组件中
                     props: ['子中props的某个需要被传的属性名']
 

               
2.子传父 
  https://www.cnblogs.com/web-record/p/10320765.html 
3.子组件传子组件用vuex1

1组件创建

1.通过Vue.extend不怎么常用，自己封装组件的时候常用

        单文件vue文件
            <script>
               export default {
                     methods: { }
              };
       相当于====》
             </script>
                Vue.extend({
                     methods: { }
              })

2.通过Vue.component()字面量注册 全局

     Vue.component('my-apprvuser',{
              template:'',
              data:function(){
              return{}
              }
            //选项
    })

源码中：
definition = this.options._base.extend(definition) //其实就是Vue.extend方法                 
Vue.options[components][id] = definition
总结起来，全局注册组件就是Vue实例化前创建一个基于Vue的子类构造器，并将组件的信息加载到实例options.components对象中

备注Vue.use http://kmxs.com.cn/articles/vue/2019-12-18/102.html
这里use其实就在install函数里面用得Vue.component()
即

 install:(Vue) => {
        Vue.component('XX',xxx);
 }

3.局部 （只能在#app中使用）

new Vue({ 
           el: '#app',
           components: { 
                       'component-a': ComponentA, 
                       'component-b': ComponentB
            } 
     })

4.vue单文件组件注册，这个也是最常用的

单文件里面父组件包含子组件：

components: {
    Son
}//这个里面加，这种就是局部注册

https://www.cnblogs.com/sanyun/p/11679523.html

【总结】
全局注册的组件是扩展到了Vue.options下，所有组件的构造函数都会把Vue.options扩展到自己的options中，
因此所有的组件都可以使用。而对于根实例vm也就new出来的那个实例,在_init的时候会把Vue.options合并到vm.$options中去。
全局注册的组件因为不属于任何一个组件，所以采用放在了vm.options.components的原型上这种合并策略, 简单说就是Vue.options.components给vm.$options.components用的时候，只给一个空对象，这个空对象指向我就好了，直接白给不可能的，哼哼~
而局部注册的组件是扩展到当前组件对应的构造函数上了，因此只有该组件才能使用。
（https://juejin.cn/post/6844904149692186632）

2路由创建的时候，也可以附带注册组件

import HelloWorld from 'xxx.vue'
routes:[
{
 path:'/',
 name:'test',
 component:HelloWorld
}

]

vue子父组件值双向传递

1.首先必须是父组件给子组件赋值属性，所以子组件中属性不能改
2.子组件用一个data先等于属性值，子组件通过事件将data值传给父组件，修改父组件data，由父组件修改子组件属性值，做到双向绑定

vue 组件通信

【vue provide和inject】
用于隔代组件通信，vue官方好像不推荐
【父传子】
props
【子传父】
emit
【vuex】
比较万能 
【Vue中this.$parent和this.$ children】
当前组件实例可以访问到子组件或者父组件实例
【eventbus】
创建一个公共组件 分别使用emit和on在俩组件中进行事件订阅