一、所有記錄
- 冒號前綴
- 插槽
- 生命週期
- ref
- 組件中數據傳遞
- $confirm
- Message
二、記錄細節
1.冒號前綴
export default {
data(){
return {
item: {
src: 'xxxxx'
}
}
}
}
<img :src='item.src'>
說明 img標籤的src屬性是動態的，根據你的data裏面的數據而來
- 加冒號的，說明後面的是一個變量或者表達式，
- 沒加冒號的後面就是對應的字符串字面量
2.插槽 slot
顧名思義 ，就可以理解爲 引用的模版中有<slot></slot>的地方，即可理解爲相當於一個插線板的插槽,在使用的時候使用html元素（相當於插頭）嵌入到插槽內，如：
<div class="" id="app">
<my-component>
<p>hi,slots</p> 插頭
</my-component>
</div>
<script>
Vue.component('my-component', {
template: `
<div>
<slot></slot> 插槽
<div>
});
</script>
這時候通過瀏覽器解析就是：
<div>
<p>hi,slots</p>
<div>
命名的插槽
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="" id="app">
<my-component>
<p slot='slot1'>hi,slot1</p>
<p slot='slot2'>hi,slot2</p>
</my-component>
</div>
<script>
Vue.component('my-component', {
template: `
<div>
<slot name='slot1'></slot>
<slot name='slot2'></slot>
<div>
});
</script>
實際例子比如 el-card
<template>
<div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">
<div class="el-card__header" v-if="$slots.header || header">
<slot name="header">{{ header }}</slot>
</div>
<div class="el-card__body" :style="bodyStyle">
<slot></slot>
</div>
</div>
</template>
在項目中看待源代碼就可以 根據插槽的設置，進行添加元素了，如自己的一個 模塊中
<el-card class="el-card" :key="index" onclick="">
<div slot="header" class="clearfix">
<span>{{item.appname}}</span>
</div>
<div >
<div class="text item">
<div class="item_tag" >
<span >用戶標籤：</span>
</div>
<div class="item_desr">
<span > {{item.tag}}</span>
</div>
</div>
</div>
</el-card>
在瀏覽器中顯示爲
<div class="el-card el-card is-always-shadow" onclick="">
<div class="el-card__header">
<div class="clearfix">
<span>芒夏</span>
</div>
</div>
<div class="el-card__body">
<div>
<div class="text item">
<div class="item_tag">
<span>用戶標籤：</span>
</div>
<div class="item_desr">
<span> 會粵語，會英語，普通話標準，責任心強，溝通能力強</span>
</div>
</div>
</div>
</div>
</div>
這和自己加入的元素結構是一致的，也發現加入了一層不必要的div ,去除後，簡化了結構層級，效果也是一樣的。
3.生命週期
比如在管理後臺開發中，封裝 了一個自建，當路由從一個路徑進入，組件需要更新數據，並根據根據數據內容更行組件顯示的元素：
<template>
<el-row :gutter="20" class="el-row" >
<el-col :span="8" v-for = "(item,index) in apps" :key="item.id" class="el-col" >
<el-card class="el-card" :key="index" onclick="">
<div slot="header" class="clearfix">
<span>{{item.appname}}</span>
</div>
</el-card>
</el-col>
</el-row>
</template>
<script>
import {getRequest} from '../../utils/api'
export default {
name: 'AppManager',
data () {
return {
loading: false,
apps: []
}
},
mounted () {
this.initApps()
},
methods: {
initApps () {
this.openloading()
getRequest('/apps/list').then(data => {
this.closeloading()
if (!data) {
return
}
this.apps = data.data
console.log(data)
})
}
}
}
</script>
4.ref
子組件被掛載到父組件後，父組件觸發了一個事件後，需要觸發更新操作，這就要用到ref操作
例子：
- 父組件創建子組件：
<AppManager v-show="!isEditApp" ref="referpage" @event="handleOpenEditApp" ></AppManager>
- 需要子組件更新操作
handleEditCancel (isUpdate) {
this.isEditApp = false
this.editapp = {}
if (isUpdate) {
this.$refs.referpage.initApps()
}
}
- 子組件更新方法
initApps () {
this.openloading()
getRequest('/apps/list').then(data => {
this.closeloading()
if (!data) {
return
}
this.apps = data.data
console.log(data)
})
}
5.組件中數據傳遞
- 父親視圖向子視圖傳遞
1.子視圖需要接收的數據放在props中
props: {
editType: {
type: String,
required: true,
default: String
},
form: {
type: Object,
required: true,
default: Object
}
}
2.父視圖傳遞
<EditApp v-show="isEditApp" :edit-type="editType"
:form="editapp"
@eventCancel="handleEditCancel">
</EditApp>
子視圖回調及數據傳遞
handlecancel () {
this.resetForm('form')
//eventCancel 向父組件回調方法名
this.$emit('eventCancel', this.update)
this.update = false
}
子視圖與父視圖傳遞來的數據雙向綁定
//父親視圖 數據
data () {
return {
editapp: {},
}
}
//向子視圖傳遞數據
<EditApp :form="editapp"></EditApp>
//子視圖數據
props: {
form: {
type: Object,
required: true,
default: Object
}
}
//子視圖對數據綁定
<div class="dialog_content" v-loading="loading">
<el-form :model="form" :rules="rules" ref="form" label-width="130px" class="demo-ruleForm" >
<el-form-item label="App名稱：" prop="appname">
<el-input placeholder="請輸入用戶標籤" v-model="form.appname"></el-input>
</el-form-item>
</el-form>
</div>
當子視圖對綁定的數據進行更改後，父視圖的數據也會作出改變
6.$confirm
this.$confirm('將刪除該用戶, 是否確定?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log(111);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消刪除'
});
});
7.Message
//導入
import {Message} from 'element-ui'
//使用
axios.interceptors.response.use(success => {
// eslint-disable-next-line eqeqeq
if (success.status && success.status == 200 && success.data.status == 500) {
Message.error({message: success.data.msg})
return
}
if (!success.data.msg) {
} else {
Message.success({message: success.data.msg})
}
return success.data
}, error => {
// eslint-disable-next-line eqeqeq
if (error.response.status == 504 || error.response.status == 404) {
Message.error({message: '服務器被吃了( ╯□╰ )'})
// eslint-disable-next-line eqeqeq
} else if (error.response.status == 403) {
Message.error({message: '權限不足，請聯繫管理員'})
// eslint-disable-next-line eqeqeq
} else if (error.response.status == 401) {
Message.error({message: '尚未登錄，請登錄'})
router.replace('/')
} else {
if (error.response.data.msg) {
Message.error({message: error.response.data.msg})
} else {
Message.error({message: '未知錯誤!'})
}
}
})