js代码:
复制代码
// 定义
var MyComponent = Vue.extend({
template: ‘
})
// 注册
Vue.component(‘my-component’, MyComponent)
// 创建根实例
new Vue({
el: ‘#example’
})
复制代码
输出结果:
复制代码
js代码:
复制代码
var vue = new Vue({
el:”#dynamic”,
data: {
currentView: “home”
},
components: {
home:{
template: “Home”
},
posts: {
template: “Posts”
},
archive: {
template: “Archive”
}
}
});
document.getElementById(“home”).onclick = function(){
vue.currentView = “home”;
};
document.getElementById(“posts”).onclick = function(){
vue.currentView = “posts”;
};
document.getElementById(“archive”).onclick = function(){
vue.currentView = “archive”;
};
复制代码
组件和v-for
不能传递数据给组件,因为组件的作用域是独立的。为了传递数据给组件,应当使用props: