深入理解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>

vue使用技巧总结