vue base (三)

1.混入 mixin  一个混入对象可以包含任意组件选项

// mixins.js

 let myMixin= { 
  created: function () { 
        this.hello() 
    },
 methods: {
     hello: function () { 
    console.log('hello from mixin!')
   } 
  }
} 
export default myMixin    

// 组件内：

export default {
  mixins: [myMixin]
}

2. 混入策略：

当组件和混入对象含有同名选项时，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

3. directive 自定义指令

钩子函数：

　　bind: 绑定上就执行，只执行一次

　　inserted：元素被插入DOM中时调用， 此时可获得DOM节点，对DOM节点进行操作

　　update: 所在组件的VNode更新时调用

　　componentUpdated: 所在的组件相关虚拟DOM所有都更新时调用

　　unbind: 解绑时调用

如果不写钩子函数，默认是bind和update被调用

下面是用自定义指令实现已经有的指令

5. v-on 

<Button v-my-on:click="show2">测试v-on</Button>

Vue.directive("myOn",function(el,binding) {
　　el.addEventListener("click",binding.value,false);
});

6.  v-if

Vue.directive("myIf", {
    inserted: function(el,binding) {
    if (!binding.value) {
        el.parentNode.removeChild(el)
     }
    }
});

<div v-my-if="0">这里是实现v-if</div>
<div v-my-if="1">这里是实现v-if</div>

7. v-show

<div v-my-show="isShow">这里是实现v-show</div>
Vue.directive("myShow",function(el,binding) {
    if (!binding.value) {
    el.style.display= "none";
    }else {
    el.style.display= "";  
    }
});    

8. v-model

<input v-bind:value="message" v-on:input="message = $event.target.value" />

通过v-bind将message传给input的value, 用v-on监听输入事件，将输入的值赋给message

9. render 函数

rain.js  // 这里是抽离出来render函数

import About from "views/About";

import Ccc from "views/ccc";

export default {

  render: function(createElement) {

    if (this.level === 1) {

      return createElement(About, {

        props: { level: this.level }

      });

    }

    if (this.level === 2) {

      return createElement(Ccc, {

        props: { level: this.level }

      });

    }

  },

  props: {

    level: {

      type: Number

    }

  }

};

Ccc.vue

<template>

  <div>

    <div>这里是测试render实例的第二个组件</div>

    <div v-if="level">

      这是通过render函数渲染拿到的props level={{ this.level }}

    </div>

  </div>

</template>

<script>

  export default {

      name: 'Ccc',

      props: {

        level: Number

      }

  }

</script>

父组件

Grid.vue  //这里作为父组件里调用render函数

<template>

  <div class="container">

    <div> 这里是render测试</div>

  <Rain :level="1"></Rain>

  <Rain :level="2"></Rain>

  </div>

</template>

<script>

import Rain from './rain'  // 引入render函数的js

export default {

    name: 'Grid',

    components: {

        Rain

    },

    data() {

        return {

            content: '这是一个render实例',

            level: 1

        }

    }

};

</script>