组件 | vue component
})newVue({el:#example})注意组件的模板替换了自定义元素,自定义元素的作用只是作为一个挂载点。可以用实例选项replace决定是否替换。局部注册不需要全局注册每个组件。可以让组件只能用在其它组件内,用实例选项components注册:varChild=Vue.extend({})varParent=Vue.extend({template:...,components:{my-component:Child}})这种封装也适用于其它资源,如指令、过滤器和过渡。注册语法糖为了让事件更简单,可以直接传入选项对象而不是构造器给Vue.component()和component选项。Vue.js在背后自动调用Vue.extend():Vue.component(m...
}) new Vue({ el: #example })注意组件的模板替换了自定义元素,自定义元素的作用只是作为一个挂载点。可以用实例选项 replace 决定是否替换。
局部注册不需要全局注册每个组件。可以让组件只能用在其它组件内,用实例选项 components 注册:
var Child = Vue.extend({ })
var Parent = Vue.extend({
template: ...,
components: {
my-component: Child
}
})
这种封装也适用于其它资源,如指令、过滤器和过渡。
注册语法糖为了让事件更简单,可以直接传入选项对象而不是构造器给 Vue.component() 和 component 选项。Vue.js 在背后自动调用 Vue.extend():
Vue.component(my-component, {
template: <div>A custom component!</div>
})
var Parent = Vue.extend({
components: {
my-component: {
template: <div>A custom component!</div>
}
}
})
组件选项问题传入 Vue 构造器的多数选项也可以用在 Vue.extend() 中,不过有两个特例: data 和 el。试想如果我们简单地把一个对象作为 data 选项传给 Vue.extend():
var data = { a: 1 }
var MyComponent = Vue.extend({
data: data
})
这么做的问题是 MyComponent 所...