VUE開發(fā)組件的時(shí)候 很不方便,現(xiàn)在我們吧 tempate 中的代碼 和 聲明、注冊(cè)、綁定 分離開寫:
有兩種方法分離,先說第一種:
?
第一種是直接? 用script標(biāo)簽,然后他的type屬性一定要是 "text/x-template",然后可以注冊(cè)個(gè)id,直接在template中調(diào)用即可:
<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>
????//注冊(cè)一個(gè)全局組件
????Vue.component('m-cpn',{
??????template:'#bihu'
????})
????const?app?=?new?Vue({
??????el:"#app"
????})
????
</script>
?我嘗試過用 class 來尋找,但是失敗了,所以只能是id哦,這個(gè)方法就這樣 ,其他那些父組件子組件都通用(要回去復(fù)習(xí)一下哦)
?
?
第二種方法:?
直接用 template 這個(gè)標(biāo)簽中寫代碼,然后配個(gè)ID? ,然后也是在template中直接調(diào)用:
<template?id="bihu">
??????<div>
????????<h2>分離寫法</h2>
????????<p>你懂我的期待。</p>
??????</div>
??</template>
??<div?id="app">
??<m-cpn></m-cpn>
??</div>
??<script?src="vue.js"></script>
??<script>
??????//注冊(cè)一個(gè)全局組件
??????Vue.component('m-cpn',{
????????template:'#bihu'
??????})
??????const?app?=?new?Vue({
????????el:"#app"
??????})
??</script>
?
其實(shí)就是 script 標(biāo)簽 換 template 標(biāo)簽。 第二種比較方便。
?
局部綁定:
?
<script>
??????const?app?=?new?Vue({
????????el:"#app",
????????components:{
??????????'m-cpn':{
????????????template:'#xxid'
??????????}
????????}
??????})
??</script>
?
作者:??咸瑜???