1 why
为了简化组件的注册,template选项中在拼接HTML比较麻烦,这也导致了HTML和JS的高耦合性。
2 how
2.1 使用script注册组件
<div id="app">
<my-component></my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script type="text/x-template" id="myComponent">
<div>这是一个组件</div>
</script>
<script type="text/javascript">
Vue.component('my-component',{
template : '#myComponent',
});
new Vue({
el:"#app",
});
</script>
2.2 使用template注册组件
<div id="app">
<my-component></my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<template id="myComponent">
<div>这是一个组件</div>
</template>
<script type="text/javascript">
Vue.component('my-component',{
template : '#myComponent',
});
new Vue({
el:"#app",
});
</script>
区别 : 使用template注册组件不需要写 type属性。