Vue--组件基础

本篇为根据Vue教程--组件基础写出完整的例子。

1. 全局注册的组件

全局注册的组件在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。

// 命名可以采用驼峰或者中划线，但是在使用组件时应使用中划线形式。
Vue.component('addComponent',{...}

2. watch API

watch:{
// 在count数据发生改变时可以观测到数据，进行一些处理
  ount: function(newVal, oldVal){
  console.log(`变化之前${oldVal}，变化之后${newVal}`)
}

3. props

  <div id="app">
    <add-component :num="count"  @add-one="add">哈哈</add-component>
  </div>

props:{
    // 采用了对象的写法
    num:{
      type: Number, // 接受Number类型
      required: true, // 参数是否必须
      default: 1, // 未传值时生效的默认值
      validator: (value)=>{ // 可以对数据进行检测，要返回true或者false
        // value 是传过来num的值
        return value > 700 ? false : true
      }
    }
  },

4. 监听子组件事件

  <div id="app">
    // 监听add-one事件。 此处的哈哈会传给组件中的slot进行显示。
    <add-component :num="count"  @add-one="add">哈哈</add-component>
  </div>

  // 使用``号可以换行code。
  template:`<div>
    <div>prop:{{num}}</div>
    <div>组件数据:{{componentNum}}</div>
    // 点击后触发add-one事件，并传值给该事件所触发的父组件中的事件。
    <button @click="$emit('add-one',parseInt(addend,10))">给父元素加{{addend}}</button>
    <input placeholder="要加几老铁？" 
      v-model="addend"/>
    <div>插槽接受的内容：<slot></slot></div>
  </div>`