VUE开发组件的时候 很不方便，现在我们吧 tempate 中的代码 和 声明、注册、绑定 分离开写：
有两种方法分离，先说第一种：
第一种是直接 用script标签，然后他的type属性一定要是 "text/x-template",然后可以注册个id，直接在template中调用即可：
<script type="text/x-template" id="bihu">
<div>
<h2>分离写法</h2>
<p>都是愚蠢的自己。</p>
</div>
</script>
<div id="app">
<m-cpn></m-cpn>
</div>
<script src="vue.js"></script>
<script>
//注册一个全局组件
Vue.component('m-cpn',{
template:'#bihu'
})
const app = new Vue({
el:"#app"
})
</script>
我尝试过用 class 来寻找，但是失败了，所以只能是id哦，这个方法就这样 ，其他那些父组件子组件都通用（要回去复习一下哦）
第二种方法：
直接用 template 这个标签中写代码，然后配个ID ，然后也是在template中直接调用：
<template id="bihu">
<div>
<h2>分离写法</h2>
<p>你懂我的期待。</p>
</div>
</template>
<div id="app">
<m-cpn></m-cpn>
</div>
<script src="vue.js"></script>
<script>
//注册一个全局组件
Vue.component('m-cpn',{
template:'#bihu'
})
const app = new Vue({
el:"#app"
})
</script>
其实就是 script 标签 换 template 标签。 第二种比较方便。
局部绑定：
<script>
const app = new Vue({
el:"#app",
components:{
'm-cpn':{
template:'#xxid'
}
}
})
</script>
作者：咸瑜
开通会员