Vue 使用指南
文章目录
Element - The world’s most popular Vue UI framework
父子组件通信
传值 props & 传结构 slot 插槽
父组件
<c-or-e
@success="handleSuccess"
// 被子组件的 this.$emit('cancel') 触发
@cancel="dialogFormVisible = false"
// 给子组件传值
:is-edit="isEdit"
:role-id="roleId"
v-if="dialogFormVisible"
>
<!-- 给子组件传的结构 -->
<!-- 如果需要用到子组件的数据，那么这样接收的是一个子组件传来的数据对象 -->
<template v-slot:header="dataObj">
<h1>头部组件{{dataObj.num}}</h1>
</template>
<template v-slot:default>
<p>content</p>
</template>
// v-slot:footer 简写为 #footer
<template #footer="{value, num}">
<p>foot{{value}}</p>
<p>foot{{num}}</p>
</template>
</c-or-e>
子组件
<templete>
<header>
<!-- 给父组件传来的插槽，绑定值 但父组件将接收到一个对象，需要使用dataObj.num才能取到里面的值 -->
<slot name="header" :num="num"></slot>
</header>
<main>
<slot></slot>
</main>
<el-button @click="onCancel">取消</el-button>
<el-button type="primary" @click="onSubmit">确认</el-button>
<footer>
<slot name="footer" :num="num" :value="value"></slot>
</footer>
</templete>
<script>
export default {
name: 'COrE',
// ?组件接收父组件状态
props: {
isEdit: {
type: Boolean,
default: false
},
roleId: {
type: [Number, String]
}
},
data () {
value: '给父组件传来的结构里面设计值',
number: 100
},
methods: {
onCancel () {
// 触发父组件的cancel方法
this.$emit('cancel')
this.form = {}
},
async onSubmit () {
const { data } = await getRoleSaveOrUpdate(this.form)
// console.log(data)
if (data.code === '000000') {
this.$emit('success')
this.$message.success('提交成功!')
this.form = {}
}
}
}
}
</script>
父组件设置 v-model
- 由子组件的 value 接收
- 默认被子组件的 input 方法触发，且将值传递给 v-model
// 父组件
<course-image v-model="courseInfo.courseImgUrl"></course-image>
// 子组件
export default {
name:"CourseImage",
props:{
value:{
type: String
}
},
methods: {
async handleUpload (options) {
// console.log(options)
const fd = new FormData()
fd.append('file',options.file)
const {data} = await uploadImg(fd)
if(data.code==="000000"){
this.$emit('input',data.data.name)
this.$message.success('上传成功')
}
}
}
父组件与「路由和子组件」的通信
-
父组件传给路由
// list.vue <!-- scope.row 为作?域插槽提供的当前?数据 --> <el-button type="text" @click="$router.push({ name: 'alloc-menu', params: { roleId: scope.row.id }, // 给子路由查询 query: { lessonId: scope.row.lessonId } })">分配菜单 </el-button> -
路由传给子组件
- 详见 Vue Router 阶段 -> 路径传参处理
// router/index.js
// - 设置 props: true，让路径参数通过 props ?式传递给组件
{
path: '/role/:roleId/alloc-menu',
name: 'alloc-menu',
component: () => import(/* webpackChunkName: 'alloc-menu' */'@/views/role/alloc-menu'),
props: true
},
- 子组件接收
- 接收路由传来的动态参数 接收到了这个roleId值。可以使用了。
// alloc-menu.vue
props: {
// 组件内需要通过 props 接收路径传递的参数，实现解耦
// - 注意，$route ?的数据虽然还能访问，但不要?，否则组件与路由还是耦合，解耦就?写了
roleId: {
type: [String, Number],
required: true
}
}
// 子路由使用query
this.$route.query.lessonId
定位到某组件
<el-tree ref="menu-tree"></el-tree>
// 在scripts中
this.$refs['menu-tree']
this.$refs.menu-tree
// 在组件中选择组件
<el-button @click="$refs['menu-tree'].setCheckedKeys([])">清空</el-button>
// 在scripts中this.$refs['menu-tree']this.$refs.menu-tree// 在组件中选择组件<el-button @click="$refs['menu-tree'].setCheckedKeys([])">清空</el-button>
判断数据类型
往数组增加内容
// 会导致试图视图频繁变化
this.defaultKeys.push(menu.id)
// 赋值方式
this.defaultKeys = [...this.defaultKeys, menu.id]
filters使用
<template slot-scope="scope">
<span>{{ scope.row.createTime | dateFormat }}</span>
</template>
<script>
filters: {
dateFormat(date){
date = new Date(date)
return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}-${date.getHours()}:${date.getMinutes()}`}}
</script>
request
// courses.js
import request from '@/utils/requests'
// 查询课程 信息接口
export const getQueryCourses = (data) => {
return request({
method: 'POST',
url: '/boss/course/getQueryCourses',
data
})
}
// 课程上下架 信息接口
export const changeState = (params) => {
return request({
method: 'GET',
url: '/boss/course/changeState',
params
})
}
// 通过课程Id获取课程信息
export const getCourseById = (courseId) => {
return request({
method: 'GET',
url: '/boss/course/getCourseById',
params:{courseId}
})
}
对封装的 get 方法传递 params，进行调用
// list.vue
import {getQueryCourses,changeState} from '@/services/courses'
const {data} = await changeState({
courseId: row.id,
status: row.status
})
const {data} = await getCourseById(this.courseId)
上传请求进度检测 onUploadProgress axios
// 上传图片
export const uploadImg = (data,onUploadProgress) => {
return request({
method: 'POST',
url: '/boss/course/upload',
data,
onUploadProgress
})
}
// 调用
const {data} = await uploadImg(fd,event =>{
this.precentage = Math.floor(event.loaded/event.total*100)
})
插件使用 — 以富文本编辑器为例
常?的富?本编辑器有：(各有优缺点，建议优先根据维护性选择，相同时看喜好)
- ckeditor
- quill
- wangEditor
- ueditor
- tinymce
这?以 wangEditor 使?为例进?功能处理
wangEditor
npm 安装
npm i wangeditor --save，几行代码即可创建一个编辑器。
import E from 'wangeditor'
const editor = new E('#div1')
editor.create()
methods:{
loadEditor () {
const editor = new E(this.$refs.editor)
// 配置 onchange 函数之后，用户操作（鼠标点击、键盘打字等）导致的内容变化之后，会自动触发 onchange 函数执行。
editor.config.onchange = value => {
this.$emit('input',value)
}
// 配置完成后，再生成实例
editor.create()
// 设置初始内容 此时还没有取到后端更新（因为异步）的初始值
editor.txt.html(this.value)
this.editor = editor
},
},
// 监听数据变化 重新更新从后端更新上来的editor的值
watch: {
value () {
if (!this.isLoaded){
this.editor.txt.html(this.value)
this.isLoaded = true
}
}
}
this
修改为箭头函数，内部 this 才能访问 Vue 实例
过滤器
监听器
其他
- 组件命名
my-components kebab-case
MyComponents PascalCase
- template
用于设置组件的结构，最终通过自定义标签名的方式被引入根实例或其他组件中。
template标签是一个内容占位符，用来标记某一块内容用于统一处理。
- 父子通信
子通过props属性接收使用驼峰命名，父传递使用kebab-case(html)。此为单向数据流，仅父传递子。（数组和对象除外）
若子组件没有通过props接受，这些属性会被自动绑定到子组件的根元素上，若已存在则会被替换，class和style会被合并。
props: {
myObject: {
type: Number,
default: 200,
// default和required不会同时出现
required: true
}
}
props: {
myObject: {
type: [Array, Object],
// 对象或数组，要用工厂函数包裹起来 避免多次引用相同组件，导致作用域混乱
default: function (){
return [1,2,3]
}
}
}
- 插槽
可以简写为：
前端路由
- hash 模式
- history 模式
style和class的绑定
