Vue组件的创建和传值

## 创建组件的3种方法
# 第一种:
+ Vue.extend()函数返回一个组件的构造器,里面包含一个参数,参数是对象,对象里面是一些配置项
+ Vue.component()函数利用Vue.extend()返回的构造器创建一个组件的实例,有两个参数.;
参数1:组件名字,参数2:组件构造器

 注意:
     模板template中只能有一个根节点
    组建的名字采用驼峰命名的话,使用时,就要加上"-"; 例如:组件名字indexA-->index-a;

## 第二种:
+ Vue.component('indexB',{模板})

## 第三种:
+ 通过制定模板创建,在Vue管辖范围之外定义模板

## 总结:
+ 先制造一个模板,在创建组件

## 组件中使用指令:
+ 在Vue.component()里边,有template模板,有data()函数,有methods()方法
+ 注意:data()必须是一个个函数.不能使用属性定义;函数里边return出去一个对象

## 父组件传值给子组件的方法
* 先创建好父组件和子组件
* 在父组件的模板中的son,子组件标签里绑定 :属性 = 父组件需要传递的数据;
* 在子组件的son{}中  使用props来接收父组件传递过来的数据;
* props后跟一个数组,数组中是一个个字符串,这些字符串可以当成属性使用,即props:['属性名']
* 代码如下:

    *

Vue.component('father',{
    
        template:'<div>....<son :myName="mySonName"></son></div>',
        
        data(){
        
            return{
                mySonName:'小明'
            }
        },
        
        //子组件
        components:{
        
            son:{
                props:['myName'],
                template:'...{{myName}}'
            }
        }
    })

## 子组件传值给父组件的方法
* 先创建好父组件和子组件;

* 在子组件methods方法中使用this.$emit()方法,
    * 这个方法有两个参数;参数1:需要与父组件交换事件名称,参数2:要传递的数据;

* 在父组件模板的son标签中使用方法名的传递:
即,@tellFatherMyname = "getMySonName";

* 在父组件的methods方法中传入data参数,这个data=子组件传递过来的数据,然后让mySonName = data;*

代码如下:
    

 <div id="app">
    
        <father></father>

    </div>
    
    <script>
    
        Vue.component('father',{
            template:`<div>
            <p>我的儿子告诉我他叫{{mySonName}}</p>
            <son @tellFatherMyname="getMySonName"></son>
            </div>`,
            data(){
                return {
                    mySonName:'???'
                }
            },
            methods:{
                getMySonName(data){
                    console.log(data);
                    this.mySonName = data;

                }
            },
            components: {
                son:{
                    data(){
                       return {
                        myName :'小明'
                       }
                    },
                    template:`
                            <button @click = "emitMyname">点击就告诉父亲我叫{{myName}}                    
                            </button>`,
                    //在子组件的methods中使用this.$emit()来传递值;
                    //$emit()有2个参数;参数1:需要交换的事件名,参数2:要传递的数据;例 
                       如:this.name
                    methods:{
                        emitMyname(){
                            this.$emit('tellFatherMyname',this.myName)
                        }
                    }
                    
                }
            }
        })
        var vm = new Vue({
            el:'#app',
            data:{

            }
        })
    </script>

### 兄弟组件的创建和传值:
* 创建兄弟组建时,先创建好父组件,然后在子组件中创建son组件 和 daughter组件;
* 接下来是 son组件 和daughter组件之间传值;
*  dau --> son传值

* 在dau中 先通过事件总线发射一个事件名称和要传递的数据;即eventbus.$emit('事件名称','数据')
    *  事件总线:
var eventbus = new Vue();

* 在 son 中先写一个钩子函数,再通过eventbus.$on('事件名称',data=>{})方法去监听,接收兄弟节点发射过来的事件
*  $on()有两个参数,参数1:事件名称;参数2:函数,函数的默认值是传递过来的数据* 代码如下:
    *  

<div id="app">
    
        <!-- 在此处渲染到页面上 -->
        <father></father>

    </div>

    <script>
    
        //先创建一个vue空实例,作为事件总线
        var eventbus = new Vue();
        
        Vue.component('father',{
        
            //组件显示的模板
            template:`<div>
                        <son></son>
                        <daughter></daughter>
                    </div>`,
           components: {
               son:{
                   data(){
                      return {
                        mySisterName:'???'
                      }
                   },
                   //组件显示的模板
                   template:'<p>我的妹妹告诉我她叫{{mySisterName}}</p>',
                   //采用钩子函数
                   //在钩子函数中通过eventbus.$on('同一个事件名称',data)来接收传递过来的数据
                   mounted(){
                       eventbus.$on('tellBroMyName',data=>{
                           this.mySisterName = data;
                       })

                   }
                },
               daughter:{
                   data(){
                     return {
                        myName:'兰兰'
                     }
                   },
                   template:'<button @click="emitMyName">点击就告诉哥哥我叫{{myName}}</button>',
                   methods:{
                       //只要点击按钮,就将事件和数据一起传递过去
                       emitMyName(){
                           eventbus.$emit('tellBroMyName',this.myName)
                       }
                   }
               }
           }
        })
        var vm = new Vue({
            el:'#app',
            data:{

            }
        })
    </script>