vue 组件/实例的选项的顺序
2019-05-30 本文已影响0人
一代码农1970
推荐的组件选项默认顺序
<script>
export default {
el: '#app', // 只在由 new 创建的实例中遵守。
// 全局感知
name: 'name', // 组件name
parent: VueInstance, // 指定父实例
// 组件类型
functional: false, // 没有data 实例 没有上下文
// 模板修改器
delimiters: ['${', '}'], // 分隔符变成了 ES6 模板字符串的风格
comments: false, // 当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。
// 模板依赖
components: {}, // 子组件
directives: {}, // 自定义指令
filters: {}, // 自定义过滤器
// 组合
extends: CompA, // 扩展另一个组件 和 mixins 类似
mixins: [tableEvents], // 混入选项对象， 混入实例对象可以像正常的实例对象一样
// 接口
inheritAttrs: true,
model: { // 自定义组件在使用 v-model 时定制 prop 和 event
prop: 'checked',
event: 'change'
},
propsData: { // 只用于 new 创建的实例中。 创建实例时传递 props。
},
// 本地状态
data: () => ({ // 本地状态
}),
computed: { // 计算属性
},
// 事件 生命周期钩子
watch: {
},
// 生命周期钩子
beforeCreate() {
},
created() {
},
beforeMount() {
},
mounted() {
},
beforeUpdate() {
},
updated() {
},
activated() {
},
deactivated() {
},
beforeDestroy() {
},
destroyed() {
},
// 非响应式的属性 (不依赖响应系统的实例属性)
methods() {
},
// 渲染 (组件输出的声明式描述)
template: '<div>demo</div>', // 渲染模板
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子节点数组
)
},
renderError (h, err) { // 只在开发者环境下工作。
return h('pre', { style: { color: 'red' }}, err.stack)
}
}
</script>
