9 Vue render&mixins

mixins用于复用
在src下创建mixins/count.js用于存放你要重复使用的模块

export default {
    data() {
        return { count: 0, a: 10 };
    },
    methods: {
        add() {
            this.count++;
        },
        minus() {
            this.count--
        }
    }
};

暴露的方法
使用mixins混入

<template>
  <div>
    <h1>{{count}}</h1>
    <button @click="add">+</button>
  </div>
</template>

<script>
import Count from "@/mixins/count"//引入混入文件@ = ../../
export default {
  mixins:[Count]//语法mixins:[混入文件名]
};
</script>

<style scoped></style>

Vue组件三大部分 script style template
其中 style

<style scoped></style>
scoped 代表只在当前文件下有效,作用域
加上 scoped 在全局作用域使用

render使用方法
除了template可以描述页面结构外,script里的render也能描述页面结构
2中存在,render无效,render支持jsx语法

<script>
export default{
 render(h){
	return h("h1",{},"hello")
}
}
</script>

<script>
export default{
 render(h){
	return <div><div>
}
}
</script>