VUE03

Vue组件

组件的创建

组件可以扩展HTML元素，封装可重用的代码。所有的 Vue 组件同时
也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特
有的选项) 并提供相同的生命周期钩子。
组件创建注意事项：

1.模板template只能有一个根节点；
2.创建组件时若采用驼峰命名法，使用的时候必须采用name1-name2的格式

组件的创建方式：

1.使用Vue.extend()和Vue.component()两个方法创建

Vue.extend()返回一个组件构造器，它里面有一个参数，是一个对象，里面是一些配置项
Vue.component()利用Vue.extend()返回的构造器创建一个组件实例，包含两个参数，组件名和组件构造器
```
var Index = Vue.extend({
    // 指定组件显示的模板
    template: "<div>我是首页</div>"
  })
  // 创建一个全局组件index-a
  Vue.component('indexA', Index)
```

2.直接使用Vue.component()方法创建

```
Vue.component('indexB', {
    template: '<div>我是index-b</div>'
  })
```

3.通过指定模板创建

```
Vue.component('indexD', {
    template: '#itcast'
  })
<template id="itcast">
  <div>我是index-d</div>
</template>
Vue.component('indexE', {
    template: '#heima'
  })
<script type="x-template" id="heima">
  <div>我是index-e</div>
</script>
```

组件的指令以及事件绑定

全局注册一个组件，组件中的data,methods以及指令等都适用，但data现在必须是个函数，且返回一个新的对象。这样避免组件间都引用同一个对象
<template id="itcast">
  <div>我是index-d</div>
</template>

Vue.component('index',{
    template:"#itcast",
    data(){
        return {
            name:"zs"
        }
    },
    methods:{
        tellMe(){
            alert('我是'+this.name)
        }
    }
})

父子组件创建

Vue.component('parent',{
    template:"<div>{{name}}和<son></son>是朋友</div>",
    data(){
        return {
            name:"zs"
        }
    },  
    components:{
        con:{
            template:"<div>{{name}}</div>",
            data(){
                return {
                    name:"ls"
                }
            }
        }
    }
})

父子组件通信

父组件传值给子组件
Vue.component('parent',{
    template:"<div>我给儿子取名叫：{{name}}<son :myName='name'></son>朋友</div>",
    data(){
        return {
            name:"zs"
        }
    },  
    components:{
        con:{
            template:"<div>爸爸给我取名叫：{{myName}}</div>",
            props:['myName']
        }
    }
})

子组件传值给父组件
Vue.component("index",{
  template:"<h1>{{msg}}{{myName}}<br><son @exportName='getName'></son></h1>",
  data() {
    return{
      msg:"你好！我是",
      myName:"???"
    }
  },
  methods:{
    getName(val){
      this.myName = val
    }
  },
  components:{    
    son:{
      data(){
        return {
          Name:"你爸爸"
        }
      },
      template:"<button @click='sayMyName'>点我，我就告诉你我是谁</button>",
      methods:{
      sayMyName(){
        this.$emit("exportName",this.Name)
      }
    }
    },
    
  }
})

兄弟组件的传值

实例一个空的Vue实例作为事件总线

var eventbus = new Vue()



components:{
    son:{
        data(){
            return {
                myBro:"???"
            }
        },
        template:`<span>我弟弟告诉我他叫{{myBro}}</span>`,
        mounted(){
            eventbus.$on('tellBroMyName',data => {
                this.myBro = data
            })
        }
    },
    brother:{
        data(){
            return {
                myName:"王五"
            }
        },
        template: '<button @click="emitMyName">点击就告
        诉哥哥我叫{{myName}}</button>',
        methods:{
            emitMyName(){
                eventbus.$emit('tellBroMyName',this.myName)
            }
        }
    }
}

动态组件

给vue实例data中创建一个空属性abcd

创建组件
Vue.component('index',{
    template:`<div>首页</div>`
})

给导航栏各项绑定click事件让空属性abcd等于组件名'index'
@click='abcd="index"'

创建component动态组件标签
<component :is="abcd"></component>