文章目錄
- 前言
- 一、Vue組件
- 二、專案實戰
- 1.引入組件
- 2.讀入資料
- 總結
前言
哈嘍今天再回顧一下vue的組件功能，談到組件無非就是父組件和子組件之間的傳值問題了，我們一起探討一下吧
提示：以下是本篇文章正文內容，下面案例可供參考
一、Vue組件
vue組件官網
首先組件是可復用的實體，當我們封裝好了一個組件后在父組件引入就可以使用了，
所以他們與new Vue 接受相同的選項，例如 data、computed、watch、methods、以及生命周期鉤子等，
你可以將組件任意次的使用：
注意：
- 當你點擊按鈕時，每個組件都會獨立的維護他的count，因為你，每用一次組件，就會有一個他的新的實體被創建，
- data 必須是一個函式？他為什么是一個函式呢？首先vue組件是用來復用的，且組件之間是參考關系，如果組件中的data不是一個
函式的話，那么他的子組件的實體就不是一個獨立的拷貝，而且他們之間的傳值也會受到一定的影響，
二、專案實戰
頁面中點擊按鈕彈出新增的組件，雙擊資料在右邊顯示，點擊保存新增一條資料，資料不能重復，
1.引入組件
代碼如下（示例）：
組件之間引入頁面中呼叫就可以使用了，難點在下邊我們接著看
export default {
components: {
project:() => import ("@/components/project.vue")
}
}
2.讀入資料
代碼如下（示例）：
點擊新增時先通過watch 將
watch： 更多的是「觀察」的作用，類似于某些資料的監聽回呼 ，每當監聽的資料變化時都會執行回呼進行后續操作；
但我們在資料變化時執行異步或者開銷較大的操作時，應該使用watch
watch: {
PopupShowr() {
this.visible = this.PopupShowr;
}
通過呼叫呼叫介面顯示資料，將獲取的值傳入到treedata中，
再使用子組件中的@node-click ="Selectsamplecategory"對資料進行點擊次數的判斷
判斷滑鼠點擊的次數，單次點擊次數超過2次不作處理,直接回傳,也可以拓展成多擊事件
Selectsamplecategory(data) {
console.log(data);
this.treeClickCount++;
if (this.treeClickCount >= 2) {
return;
}
this.timer = window.setTimeout(() => {
if (this.treeClickCount == 1) {
this.treeClickCount = 0;
} else if (this.treeClickCount > 1) {
this.treeClickCount = 0;
if (this.rightList.length == 0) {
this.rightList.push(data)
} else {
this.roleName = data;
var _this = this;
this.rightList.forEach((item) => {
if(_this.rightList.indexOf(_this.roleName) === -1 ){
_this.rightList.push(_this.roleName);
}
});
}
}
}, 300);
},
經過一系列的判斷拿到值后再通過子組件將值傳給父組件
父組件配置新增資料，將子組件傳過的值進行遍歷再通過呼叫介面實作新增
右側的資料洗掉：
使用熟悉的splice 陣列的前添后刪 shift unshift push pop splice 多種用法可特意學習一下
deletelist(row){
this.rightList.foreach(item,index){
if(item == row) {
this.rightList.splice(index,1)
}
}
}
總結
提示：這里對文章進行總結：
例如：以上就是今天要講的內容，本文僅僅簡單介紹了vue的使用，而vue提供了大量能使我們快速便捷地處理資料方法，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/303609.html
標籤：其他
上一篇：微信小程式分包