Vue核心知识点
- 格式：pdf
- 大小：196.75 KB
- 文档页数：11
Vue核⼼知识点
⼀、vue.config.js 基本配置
module.exports = {
// 基本路径 cli3.3以前版本⽤baseUrl
publicPath: '/',
// 输出⽂件⽬录
outputDir: 'dist',
// ⽤于嵌套⽣成的静态资源
assetsDir: '',
// ⽣产环境sourMap
productionSourceMap: false,
// webpack配置
configureWebpack: () => {},
chainWebpack: () => {},
// css相关配置
css: {
// 启动css modules
modules: false,
// 是否使⽤css分离插件
extract: true,
// 开启 css sourcemaps？
sourceMap: false,
// css 预处理器配置项
loaderOptions: {}
},
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0',
port: 8080,
proxy: {} // 设置代理
},
// 第三⽅插件配置
pluginOptions: {
// ...
}
}
⼆、vue组件间传值
1. ⽗⼦组件传值
(1) props（⽗传⼦） / $emit（⼦传⽗）
(2) $parent / $children
// App => Father => Child
// Father.vue
mounted () {
console.log(this.$children[0].val) // 访问⼦组件 Child 的某个数据（⼦传⽗）
console.log(this.$parent.val) // 访问⽗组件 App 的某个数据（⽗传⼦）
console.log(this.$parent.handleClick) // 也可以是某个⽅法
}
(3) $refs（访问具体DOM节点）
ref 后⾯⾃定义节点名称，从⽽实现在 js 中访问，访问的⽅式是 this.$refs.⾃定义名称 。
// Father.vue
mounted () {
console.log(this.$refs.child)
}
2. ⾮⽗⼦组件传值
(1) 事件总线
原理：建⽴⼀个公有的 js ⽂件，专门来传递消息。
// 在 util ⽂件夹下新建 bus.js
import Vue from 'vue'
export default new Vue()
// 在需要传递消息或者接收消息的地⽅引⼊
import bus from './bus.js'
// 点击事件中传递⾃定义事件，发送消息
bus.$emit('msg', val)
// 监听事件，接收消息
bus.$on('msg', val => {
console.log(val)
})
(2) $attrs / $listeners爷传孙：$attrs 将⽗组件中不包含 props 的属性传⼊⼦组件，通常配合 inheritAttrs 选项⼀起使⽤。
// 祖孙组件传值 App => Father => Child
// App.vue 绑定属性将祖辈组件中 msg、title 传递给⽗组件
// Father.vue 在⽗组件上绑定 v-bind="$attrs"
// Child.vue 孙⼦组件获取到祖⽗组件的数据
mounted () {
console.log(this.$attrs)
}
$listeners 监听⼦组件中数据变化，传递给⽗组件。（略）
(3) vuex
见第四章、第五章
三、Vue Router
1. 路由的基本配置
(1) router 配置（路由懒加载）
// index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/home',
name: 'home',
component: () => import('../components/Home.vue') // 懒加载：动态导⼊，按需加载
}
]
})
export default router
(2) 路由视图
App.vue，在合适的位置加上以下代码：
2. 路由的跳转
(1) router-link
跳转
(2) 编程式导航 this.$router.push( { ... } )
js 跳转
methods: {
handleGo () {
this.$router.push({
path: 'home'
})
},
// handleGo () {
// this.$router.push({
// name: 'home'
// })
// }
}
3. 动态路由
(1) 基本配置
// router ⽬录下的 index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/home/:id', // 动态路由，id 是⾃定义的参数名
name: 'home',
component: () => import('../components/Home.vue')
} ]
})
export default router
通过 $route.params.动态参数名 可以访问到动态参数：
路由动态参数：{{$route.params.id}}
(2) 编程式导航的传参
传参有两种形式，
⼀种是查询字段的传参。（path + query）
// App.vue （path + query）
methods: {
handleGo () {
this.$router.push({
path: 'home',
query: {
name: 'jack',
gender: 'male',
age: 18
}
})
}
}点击跳转按钮后，数据被传递到了 url 中：
⼀种是动态路由参数的传参。(name + params)
// App.vue (name + params)
methods: {
handleGo () {
this.$router.push({
name: 'home',
params: {
id: 123
}
})
}}
4. 嵌套路由
在 Home 页的⼀个区域显⽰⼀个路由页⾯，这个新的路由页⾯属于 home 路由，因此就要将它写在home路由规则下。
Home.vue
|- Child.vue
(1) 路由规则配置
在 home 路由下添加 children 选项，配置新的路由规则。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/home/:id',
name: 'home',
component: () => import('../components/Home.vue'),
children: [ // 新路由 Child.vue 写在 children 选项下
{
path: '/child',
component: () => import('../components/Child.vue')
}
]
}
]
})
export default router
