貌似在VUE2.x之后,VUE就不和以前那样写了, 用语法糖:
把 vue.exdents({template:xxx}) 简化为: 一个对象的形式:{template:xxx} 【其实内部也是调用vue.exdents() 这个方法的】
代码:
<div id="app">
<m-cpn></m-cpn>
</div>
<script src="js/vue.js"></script>
<script >
//语法糖写组件 直接省去vue.extends() 这个方法 【这里相当于直接注册了全局组件】
Vue.component('m-cpn',{
template:
`
<div><h3>模块开发语法糖 - 自定义组件</h3></div>
`
})
const app = new Vue({
el:"#app"
})
</script>
看出来了吧 直接对象就可以代替Vue.exdents() ,所以无论是注册全局还是局部组件 都很方便。
语法糖写组件 【父组件和子组件 (局部)】:
<div id="app">
<parent></parent>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
components: {
"parent": {
template: `
<div>
<h1>我是parent</h1>
<child1></child1>
<child2></child2>
</div>`,
components: {
"child1": {
template: ` <div>
<hr>
<h2>我是child1</h2>
</div>`
},
"child2": {
template: ` <div>
<hr>
<h2>我是child22</h2>
</div>`
}
}
}
}
})
</script>
有点乱 但是呢!!!! 后面可以吧这些template模板代码 分离写
作者:咸瑜