Vue 学习笔记（二）

一、Prop

　　1、Prop的大小写

　　HTML大小写不敏感，所以camelCase命名prop在使用DOM中的模板时，应用等价的kebab-case

　　2、Prop的类型

　　string number Boolean  Array  object Function Promise

　　3、传递静态或动态Prop

　　<blog-post title = "My name is Vue"></blog-post>

　　通过v-bind 传递任何类型的值

　　<blog-post v-bind:"post.ttite"></blog-post> 等

　　4、单向数据流

　　所有的prop 在父子组件之间是单向下行绑定。

　　5、Prop验证

 

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

 二、自定义事件

　　1、事件名

　　因为html大小写不敏感，所以推荐使用kebab-case命名事件名

　　2、自定义组件的v-model

 

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})
<base-checkbox v-model="lovingVue"></base-checkbox>

　　注意事项：需要再props选项中声明checked这个prop

　　3、将原生事件绑定到组件

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign({},
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 然后我们添加自定义监听器，
        // 或覆写一些监听器的行为
        {
          // 这里确保组件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})

 

　　4、.sync

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>
缩写
<text-document v-bind:title.sync></text-document>

 

　三、插槽

　　个人理解：就是提前站一个位置 和C#中的字符串的{}类似

 

//插槽使用
1、
<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>
2、
<navigation-link url="/profile">
  <!-- 添加一个 Font Awesome 图标 -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>
//如果<navigation-link>中没有slot 元素则填充的任何内容都不会显示，并丢弃

　　具名插槽：就是要使用多个插槽的时候给插槽取一个名字，使用的时候，指向性使用。

　　示例：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
//使用
<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
//注意 v-slot 只能添加在 <template>
</base-layout>

 

　四、动态组件和异步组件

　　1、动态组件

　　<keep-alive>
 　　　　 <component v-bind:is="currentTabComponent"></component>
　　</keep-alive>

　　通过<keep-alive> 标签缓存组件的状态，如果需要切换回标签不从新初始化，则可以使用该标签将其包裹缓存。

　　2、异步组件

　　

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

　　

　五、处理边界情况

　　1、访问元素&组件

　　通过 $root $parent 依赖注入等