Vue 组件

Vue 组件

组件是可复用的Vue实例，可以通过Vue.component(id, definition)创建全局组件。id是组件的名称，defintion是组件的描述对象和创建Vue实例对象一样（除el，el是跟组件挂载元素，组件不需要挂载点，是在父组件、根组件中作为自定义元素使用）。

Vue.component('my-component', {
    data() {
      return {
        b: '我是子组件'
      }
    },
    template: `
	    <div>{{b}}</div>
	  `
  })

  let vm = new Vue({
    el: document.querySelector('#id'),
    data: {
      a: 11
    },
    template: `
	    <div>
	      <my-component></my-component>
	    </div>
	  `
  })

与根组件不同，组件data配置必须是一个函数。否则会抛出错误：

vue.js:5108  [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.

因为组件是可以复用的，则要确保每一个组件的data项都是一个新的引用地址。

注册局部组件

通过普通JavaScript对象定义，并且在父组件components中注册

let componentA = ({
  data(){
    return {
      b: '我是局部子组件'
    }
  },
  template: `
  <div>{{b}}</div>
`
})

let vm = new Vue({
  el: document.querySelector('#id'),
  data: {
    a: 11
  },
  template: `
    <div>
      <componentA></componentA>
    </div>
  `,
  components: {
    componentA
  }
})

props传值

可以通过props传值给子组件。父组件使用时传递attribute，子组件通过props配置项接收。props可以是数组写法，也可以是对象写法。对象写法可以配置类型和默认值

let componentA = ({
   data(){
     return {
       b: '我是局部子组件'
     }
   },
   props: {
     title: {
       type: String,
       default: '默认标题'
     }
   },
   template: `
   <div>{{b}}--标题是：{{title}}</div>
 `
 })

 let vm = new Vue({
   el: document.querySelector('#id'),
   data: {
     a: 11
   },
   template: `
     <div>
       <componentA title="我是标题一"></componentA>
     </div>
   `,
   components: {
     componentA
   }
 })

监听子组件事件

可以与父级进行沟通。子组件通过$emit 方法并传入事件名称来触发一个事件，并且可以传递参数。父组件接收该事件

// 子组件
template: `
  <div>
    {{b}}--标题是：{{title}}
    <button v-on:click="$emit('changeA',22)">向父组件沟通</button>
  </div>
`
// 父组件
template: `
	<div>
	   <componentA title="我是标题一" v-on:changeA="changeA"></componentA>
	 </div>
	`,
components: {
 componentA
},
methods: {
 changeA(event) {
   console.log(event)
 }
},

在组件使用v-model

在组件使用v-model会默认使用value为property传递给子组件；input事件为接收事件。

<my-input v-model="message"></my-input>
//相当于
<my-input v-bind:value="message" v-on:input="message = $event">
// 代码
let componentA = ({
  props: {
     value: {
       type: String,
       default: ''
     }
   },
   template: `
     <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)"></input>
   `
 })

 let vm = new Vue({
   el: document.querySelector('#id'),
   data: {
     message: ''
   },
   template: `
     <div>
       <componentA v-model="message"></componentA>
       <div>自定义输入组件输入值为： {{message}}</div>
     </div>
   `,
   components: {
     componentA
   },
 })

如果需要更换property和事件，添加model配置项即可：

 model: {
   prop: 'checked',
   event: 'change'
 },

组件触发原生事件

添加v-on的.native修饰符。需要注意，组件根元素有对应事件才可，否则会静默失败

<base-input @focus.native="onFocus"></base-input>