一、所有记录
- 冒号前缀
- 插槽
- 生命周期
- 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: '未知错误!'})
}
}
})