vue.js 中 :is 與 is 的用法和區別,學習全域性與區域性註冊元件
vue中 is用來動態切換元件，詳細請看示例：（順便講解父向子元件的傳遞資訊）
html：
<div id="app">
<!--
1.在這裡呼叫元件。
2.vue初始化例項配置項，掛載到#app,並呼叫了子元件（自定義元件first_component），通過在子元件內
提前定義props:['pass_c']接收它的父元件傳下來的值,a是初始化vue例項配置項的變數， 這種方式就是元件解耦使用。
-->
<first_component :pass_c="a"></first_component>
<div style="border:1px solid greenyellow;padding:20px">
<h2>is 與 :is 的用法 ,區別如下：</h2>
<div is="e"></div>
<div :is="f"></div>
</div>
</div>
js:
var four_component = { // 自定義元件4
template:`<h2>:is -- 要在new Vue定義一個變數才能用 :is='f' 在#app 模板呼叫,否則報錯 'undefined'</h2>`
}
var third_component = { // 自定義元件3
template:`<h2>is -- 要在components註冊這個元件，才能用 is 引用second_component元件</h2>`
}
var second_component = { // 自定義元件2
template: `<div>
<div>
<del>{{ c }} </del> <br>
<del>{{ pass_d }} </del>
</div>
</div>`,
data(){
return {
c: 'c_value come form second'
}
},
props:['pass_d']
}
var first_component = { // 自定義元件1
//注意這裡template 最外層只能有一個div，不能出現並列兩個div
template: `<div>
<div style="border:1px solid red;padding:20px;">
<h2 style="color:red;">first_component: </h2><b>{{ b }}</b><br><b>{{ pass_c }}</b>
</div>
<div style="border:1px solid green;padding:20px;">
<h2 style="color:red;">second_component: </h2>
<second_component :pass_d="d"></second_component>
</div>
</div>`, // 定義元件的模板
data(){ // 官方規定元件裡的data必須是函式，才不會在同組件中相互干擾
return { // 返回的變數可以直接在該元件的template上使用
b:'b_value come from first',
d: 'd_value come from first'
}
},
props: ['pass_c'], // 用於接收其父元件的傳值
components: { // 還可以呼叫子元件
second_component : second_component
}
}
new Vue({ // 例項化Vue
el:"#app", // 掛載到#app
components:{ //區域性註冊元件
first_component : first_component, // 一定要在例項上註冊了才能在html檔案中使用
e : third_component ,// 要在components註冊這個元件，才能用is 引用 third_component 元件
},
data:{
a : 'a_value come from new Vue',
f : four_component // 用:is 引用four_component元件，要預先定義f變數
}
})
執行結果說明：
Brief summary（本章小結）：
正確使用is 動態切換元件，只有兩種方式：
1. 先全域性註冊元件，再使用。
全域性註冊元件：
Vue.component("templateName",{
template:"<div>{{ anyValue }}</div>",
props:["anyValue"]
})
直接呼叫：<b is="templateName"></b>
申明為變數，用:is呼叫：
data{
f:"templateName" // 元件名加引號
}
<b :is="f"></b>
2. 區域性註冊元件，再使用。
var aTemplate = { // 定義一個元件模板
template:"<div>{{ anyValue }}</div>",
props:["anyValue"]
}
new Vue({
.data:{} , // 略
components:{ // 在vue例項化時，區域性註冊該元件
anyName : aTemplate
}
})
直接呼叫：<b is=" anyName"></b>
申明為變數,再用:is呼叫：
data : {
f : "aTemplate" // 元件名加引號
}
<b :is="f"></b>