Vue中元件
阿新 • • 發佈:2020-12-08
一.元件的構成
元件:由 template +css+js三部分組成(.vue檔案)
-
1)元件具有複用性
- 2) 複用元件時,資料要隔離
-
3) 複用元件時,方法不需要隔離,因為方法使用隔離資料就可以產生區別
元件介紹:
- 1) 每一個元件都有自己的template(虛擬DOM),最後要替換掉真實DOM(渲染)
- 2) 掛載點el,在根元件沒有規定template,用掛載的真實DOM拷貝出虛擬DOM,完成例項建立後再替換掉真實DOM(渲染)
- 3) 掛載點el,在根元件規定template,就採用自己的template作為虛擬DOM,掛載點還是必須的,用於佔位
- 4) 所有 newvue() 產生的元件都稱之為根元件 - 專案開發時,整個專案只有一個根元件
- 5) template只能解析一個根標籤
二.template的使用
用法一-把整個vue所關聯的內容替換
<div id="app">
{{ msg }}
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'message'
},
// template: '<div id="main"><p>{{ msg }}</p><p>{{ msg }}</p></div>'
template: `
<div id="main">
<p>{{ msg }}</p>
<p>{{ msg }}</p>
</div>
`,
})
</script>
最後顯示的效果為
message
message
其實他是先出現message
然後由於後面的template會生成一個臨時的dom,會把前面el關聯的整個標籤變成template中的內容
用法二-區域性元件
<div id="app">
<!--3)元件渲染-->
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
</div>
<script src="js/vue.js"></script>
<script>
// 1)建立元件
let localTag = {
template: '<p>66666</p>'
};
new Vue({
el: '#app',
// 2)註冊元件
components: {
// localTag: localTag, 函式 名和元件名相同可以直接簡寫成一個名字
localTag
}
})
</script>
區域性元件可以分三步
- 建立元件
- 註冊元件
- 網頁中渲染
用法三-全域性元件
<div id="main">
<global-tag></global-tag>
</div>
<script src="vue.js"></script>
<script>
// 全域性元件
// 1)建立元件
// 2)渲染元件
// 3) 使用到全域性元件的內容必須用Vue進行掛載,如果不掛載全域性元件只是個普通的自定義標籤
Vue.component('global-tag', {
template: '<p>66666</p>'
});
new Vue({
el: '#main',
});
</script>
使用到全域性元件的內容必須用Vue進行掛載,如果不掛載全域性元件只是個普通的自定義標籤 注意點
- template中只能有一個根標籤,如果有多個,只生效第一個
- template內容如果要多行顯示方便觀察的話用反引號`來代替雙引號或者單引號
三.元件複用的資料隔離
1.區域性元件中
<div id="app">
<!--3)元件渲染-->
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
</div>
<script src="vue.js"></script>
<script>
// 1)建立元件
let localTag = {
data:function(){
return {
msg:100
}
},
template: '<p>{{msg}}</p>'
};
new Vue({
el: '#app',
// 2)註冊元件
data:{
msg:20
},
components: {
// localTag: localTag, 函式名和元件名相同可以直接簡寫成一個名字
localTag
}
})
</script>
- 把data裡面值放function中當然了function可以不用寫省略掉
- 而且不會受vue中msg影響,只受元件中的msg影響
2,全域性元件中
<div id="main">
<global-tag></global-tag>
</div>
//<global-tag></global-tag> 這樣就是個普通的自定義標籤
<script src="vue.js"></script>
<script>
// 全域性元件
// 1)建立元件
// 2)渲染元件
// 3) 使用到全域性元件的內容必須用Vue進行掛載,如果不掛載全域性元件只是個普通的自定義標籤
// 4) 這裡的全域性不是指整個網頁而是指與vue進行掛載那些全部的部分
Vue.component('global-tag', {
data:function(){
return {
msg:100
}
},
template: '<p>{{msg}}</p>'
});
new Vue({
el: '#main',
data:{
msg:10
}
});
</script>
特點和區域性相同
四.元件資訊互動父傳子
<div id="app">
<local-tag :ad_dic="ad" v-for="ad in ads" :key="ad.img"></local-tag>
</div>
<script src="js/vue.js"></script>
<script>
let localTag = {
props: ['ad_dic'],
template: `
<div>
<img :src="ad_dic.img" alt="">
<h4>{{ ad_dic.title }}</h4>
</div>
`,
};
// 模擬後臺的資料
let ads = [
{
'img': 'img/001.png',
'title': '小貓'
},
{
'img': 'img/002.png',
'title': '黃蛋'
},
{
'img': 'img/003.png',
'title': '藍蛋'
},
{
'img': 'img/004.png',
'title': '短腿'
},
];
new Vue({
el: '#app',
data: {
ads, // 後期專案是後臺返回的資料
},
components: {
localTag
}
})
// 分析資料 父傳子
// 1)父元件提供資料
// 2)在父元件模板中,為子元件標籤設定自定義屬性繫結父級資料
// 3)在子元件props成員中,接收自定義屬性
// 4)在子元件模板和方法中,使用自定義屬性名就可以訪問父級資料
</script>
簡單總結
父級模板:<local-tag :屬性名="父級的資料" v-for="ad in ads" :key="ad.img"></local-tag>
子級模板: props: ['屬性名'],
資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
五.元件資訊互動子傳父
<div id="app">
<p>
<input type="text" v-model="info">
<button @click="add_msg">留言</button>
<ul>
<msg-tag @del_action="del_li" :msg="msg" :index="i" v-for="(msg, i) in msgs" :key="msg"></msg-tag>
</ul>
</p>
</div>
<script src="js/vue.js"></script>
<script>
let msgTag = {
props: ['msg', 'index'],
template: `
<li>
<span @click="del_fn">x</span>
<span>{{ msg }}</span>
</li>
`,
methods: {
del_fn() {
this.$emit('del_action', this.index)
}
}
};
new Vue({
el: '#app',
components: {
msgTag
},
data: {
info: '',
msgs: JSON.parse(sessionStorage.msgs || '[]'),
},
methods: {
add_msg() {
let info = this.info;
if (info) {
this.msgs.unshift(this.info);
this.info = '';
sessionStorage.msgs = JSON.stringify(this.msgs);
}
},
del_li(index) {
console.log(index);
this.msgs.splice(index, 1);
sessionStorage.msgs = JSON.stringify(this.msgs);
}
}
});
// 分析資料 子傳父
// 1)子元件提供資料
// 2)子元件通過系統事件啟用自己的繫結方法,傳送一個自定義事件,攜帶自身資料
// 3)在父元件模板中的子元件標籤中為自定義事件繫結父元件方法
// 4)父元件實現方法獲取到子元件資料
</script>