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>
posted on
