深入理解vue 修饰符sync
.sync修饰符，它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
示例代码如下：
<comp :foo.sync="bar"></comp> ---子组件上写要传递的参数
↓ /*转换为*/ ↓
<comp :foo="bar" @update:foo="val => bar = val"></comp>
↑将自定义事件传入的参数重新赋值↑
简单DEMO:
实现一个简单的模态框,给子组件传递显示隐藏的标杆
---父组件---
<template >
<div>
<button @click="show">点我显示</button>
<hello-world :flag.sync='flag' v-if="flag"></hello-world>
</div>
</template>
export default {
components: {
"hello-world": HelloWorld
},
data() {
return {
flag: false
};
},
methods: {
show() {
this.flag = true;
},
}
};
---子组件---
export default {
props: {
flag:Boolean //接收的参数
},
methods: {
yes() {
this.$emit('update:flag',false) //自定义事件,将模态框标杆改为false
}
},
};
父组件通过 ref 访问到子组件
虽然 vue 提供 $parent 和 $children来访问父/子组件，但是组件的父组件/子组件存在很多不确定性，例如组件被复用，他的父组件有多种情况。我们可以通过ref 访问到子组件的数据和方法。
<child ref="myChild"></child> //子组件
<script>
export default {
async mounted() {
await this.$nextTick();
console.dir(this.$refs.myChild);
},
};
</script>
注意：
-
ref必须等 DOM 加载好了才可以访问 - 虽然
mounted生命周期 DOM 已经加载好了，但是为了以防万一，我们可以使用$nextTick函数
图片的@import 使用路径别名
在用 Webpack 处理打包时，可将某一目录配置一个别名，代码中就能使用与别名的相对路径引用资源
import tool from '@/utils/test'; // Webpack 能正确识别并打包。
但是在 css 文件，如 less, sass, stylus 中，使用 @import "@/style/theme" 的语法引用相对 @ 的目录确会报错。CSS loader 会把把非根路径的url解释为相对路径，加~前缀才会解释成模块路径。
解决办法是是在引用路径的字符串最前面添加上 ~ 符号。
css module 中： @import "~@/style/theme.less"
css 属性中： background: url("~@/assets/xxx.jpg")
html 标签中： <img src="~@/assets/xxx.jpg">
router 的 hash 模式和 history 模式
我们先来看一个完整的 URL：
https://www.baidu.com/blog/guide/vuePlugin.html#vue-router
https://www.baidu.com 是网站根目录
/blog/guide/ 是子目录
vuePlugin.html 是子目录下的文件（如果只有目录，没有指定文件，会默认请求index.html文件）
#vue-router 就是哈希值。
vue 是单页应用，打包之后只有一个 index.html，将他部署到服务器上之后，访问对应文件的目录就是访问这个文件。
hash 模式：网址后面跟着 hash 值，hash 值对应每一个 router 的名称，hash 值改变意味着router 改变，监听 onhashchange 事件，来替换页面内容。
history 模式：网址后面跟着‘假的目录名’，其值就是 router 的名称，而浏览器会去请求这个目录的文件（并不存在，会 404），所以 history 模式需要服务器配合，配置 404 页面重定向到到index.html，然后 vue-router 会根据目录的名称来替换页面内容。
const router = new VueRouter({
mode: 'history', //"hash"模式是默认的，无需配置
base: '/',//默认配置
routes: [...]
})
vue-cli3 的 vue.config.js 配置：
module.exports = {
publicPath: "./", // hash模式打包用
// publicPath: "/", // history模式打包用
devServer: {
open: true,
port: 88,
// historyApiFallback: true, //history模式本地开发用
}
}
如果是网站部署在根目录，router 的 base 就不用填。如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"，同时打包配置(vue.config.js)的 publicPath 也应该设置成/app/。
引入了第三方组件，如何修改样式
有两个方法可以解决这个问题：
方法一：
在scoped的scss中使用 >>> 或者 /deep/ ，它们是vue提供的"深度作用选择器"
<style scoped>
.a >>> .b { /* ... */ }
.a /deep/ .b { /* ... */ }
</style>
方法二：
单独写一个style，不加scoped，在这里面单独修改
<style>
.a .b { /* ... */ }
</style>
