《Vue.js组件精讲》基本概念-白红宇

使用validator属性对props进行验证

复制代码

利用＄parent $children访问父/子组件

provide inject 隔代非响应式获取数据、方法

// A.vueexport default {  provide: {    name: 'Aresn'  }}// B.vueexport default {  inject: ['name'],  mounted () {    console.log(this.name);  // Aresn  }}复制代码

实现broadcast和dispatch完成向上/下级的派发事件

function broadcast(componentName, eventName, params) {  this.$children.forEach(child => {    const name = child.$options.name;    if (name === componentName) {      child.$emit.apply(child, [eventName].concat(params));    } else {      broadcast.apply(child, [componentName, eventName].concat([params]));    }  });}export default {  methods: {    dispatch(componentName, eventName, params) {      let parent = this.$parent || this.$root;      let name = parent.$options.name;      while (parent && (!name || name !== componentName)) {        parent = parent.$parent;        if (parent) {          name = parent.$options.name;        }      }      if (parent) {        parent.$emit.apply(parent, [eventName].concat(params));      }    },    broadcast(componentName, eventName, params) {      broadcast.call(this, componentName, eventName, params);    }  }};复制代码

找到任意组件

// 由一个组件，向上找到最近的指定组件function findComponentUpward(context, componentName) {  let parent = context.$parent;  let name = parent.$options.name;  while (parent && (!name || [componentName].indexOf(name) < 0)) {    parent = parent.$parent;    if (parent) name = parent.$options.name;  }  return parent;}// 由一个组件，向上找到所有的指定组件function findComponentsUpward(context, componentName) {  const parents = [];  const parent = context.$parent;  if (parent) {    if (parent.$options.name === componentName) parents.push(parent);    return parents.concat(findComponentsUpward(parent, componentName));  }  return [];}// 由一个组件，向下找到最近的指定组件function findComponentDownward(context, componentName) {  const childrens = context.$children;  let children = null;  if (childrens.length) {    for (const child of childrens) {      const name = child.$options.name;      if (name === componentName) {        children = child;        break;      } else {        children = findComponentDownward(child, componentName);        if (children) break;      }    }  }  return children;}// 由一个组件，向下找到所有指定的组件function findComponentsDownward(context, componentName) {  return context.$children.reduce((components, child) => {    if (child.$options.name === componentName) components.push(child);    const foundChilds = findComponentsDownward(child, componentName);    return components.concat(foundChilds);  }, []);}// 由一个组件，找到指定组件的兄弟组件function findBrothersComponents(context, componentName, exceptMe = true) {  const res = context.$parent.$children.filter(item => item.$options.name === componentName);  const index = res.findIndex(item => item._uid === context._uid);  if (exceptMe) res.splice(index, 1);  return res;}复制代码

Vue.extend 的作用，就是基于 Vue 构造器，创建一个“子类”，它的data必须是函数

$mount用于渲染组件，可以访问$el，但是不会直接挂载到页面上。

Vue.js 提供了一个 functional 的布尔值选项，设置为 true 可以使组件无状态和无实例，也就是没有 data 和 this 上下文。

slot-scope的使用
组件：


      
         
            
             {
   { book.name }}    
        
    
复制代码

使用：


      
     
    复制代码

<component> 和 is实现组件动态切换


    复制代码

keep-alive 还有一些额外的 props 可以配置：

include：字符串或正则表达式。只有名称匹配的组件会被缓存。

exclude：字符串或正则表达式。任何名称匹配的组件都不会被缓存。

max：数字。最多可以缓存多少组件实例。

nextTick是在下一个dom更新渲染执行的

v-model语法糖
model接受prop和event，prop用于指定接受到的值，event用于触发自定义事件
限制：一个组件只能有一个

.sync修饰符
子组件： this.$emit('update:value', this.value + val);
父组件： <InputNumber :value.sync="value" />