vue组件

组件

1 组件定义

VUE是组件化开发，整个项目由各种组件组成

什么是组件？
    每个Page就是一个组件(注册组件、登录组件、商品列表组件)
    页面的组成部分(轮播图、选项卡、下拉菜单...)
    
一个组件就是一个Vue实例
根实例(new Vue()) 其实根实例就是根组件

组件的组成：
    data
    methods
    computed
    watch
    template 模板
    钩子函数
    ...

2 组件基础

注册组件

Vue.component(组件名,{
    data:function(){
        return{
            //Vue 变量
        }
    }，
    methods{
        //方法
    },
    template:'html',
    ...
})

组件的使用

<my-button> </my-button>
使用组件的时候 会创建vue实例
类似于 html 自定义元素

每个组件都有独立的作用域

<my-button> </my-button>
<my-button> </my-button>
这两个实例的作用域是独立的

组件的模板

1.模板字符串
2.内联模板 inline-template  不推荐使用
3.x-template
4.单文件组件(最优)
5.render 渲染函数 代替 template

注意
模板内 必须有个根元素

全局组件和局部组件

Vue.component(组件,  {})  全局组件  在哪都可用

//Vue实例中
{	
	 template:'自己里面的局部， 只能在这用'
	 //局部
      components: {
          '组件名': {}，
          '组件名': {}，
          '组件名': {}
          
      }
}

组件之间的互相通信

通过Prop向子组件传递数据

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 也可以在模板中使用
  // 同样也可以在 vm 实例中通过 this.message 来使用
  template: '<span>{{ message }}</span>'
})

通过事件向父级组件发送消息

Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
      console.log('第'+this.total+'次点击')
    }
  }
})