2018-08-12-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>