组件
用途
- 组件可以复用减少很多无必要的代码，并且每个组件不相互影响
- 首先
- 创建组件
- 在父组件中引入 1.improt 2.在components {组件名字：与引入组件的名字}
- 在页面写上自定义组件的标签
代码
// 头组件
var MyHeader = {
template: "<div>我是头组件</div>"
};
// 函数调用的方式创建组件
// 身体组件
var MyBody = Vue.extend({
template: '<div>我是函数调用方式的身体组件</div>'
})
/*
var MyBody = {
template: '<div>我是身体组件</div>'
}
*/
// 底部组件
var MyFooter = {
template:
'<div>我是底部组件<button @click="showNum(123)">点我</button></div>',
methods: {
showNum: function(num) {
alert(num);
}
}
};
// 声明入口组件
var App = {
components: {
"my-herder": MyHeader,
"my-body": MyBody,
"my-footer": MyFooter
},
template: `
<div>
<my-herder></my-herder>
<my-body></my-body>
<my-footer></my-footer>
</div>
`
};
new Vue({
el: "#app",
// 声明要用的组件们
components: {
// key 组件名，value组件对象
app: App
},
data: function() {
return {};
},
template: "<app />",
methods: {}
});
</script>
