Vue 工作开发小技巧

努力的小朱同学

已于 2024-01-30 14:42:46 修改

阅读量1.1k

点赞数 21

分类专栏： Vue 文章标签： vue.js 前端

于 2023-12-14 11:47:21 首次发布

本文链接：https://blog.csdn.net/weixin_45092437/article/details/134991900

版权

Vue 专栏收录该内容

29 篇文章 8 订阅

订阅专栏

一、汇总

本博客，记录了一些Vue在日常开发工作中比较实用的小技巧，后续会陆续添加更新。

1、利用Sass的:global定义全局样式。

2、在<style>内部使用v-bind给CSS属性绑定属性值。

3、父子组件传值时，使用.sync修饰符后，可直接在子组件中通过$emit('update:propName')来更新父组件中绑定的数据。

4、利用v-bind同时向DOM元素绑定多个attribute属性。

5、Vue指令结合动态参数，动态改变DOM元素的属性或改变监听的事件。

二、内容

1、利用Sass的`:global`定义全局样式。

在 Vue.js 的单文件组件（.vue文件）中，我们通常使用<style scoped>来为当前组件添加样式，这样样式就只会作用于当前组件，不会影响其他组件。这实际上是通过给每个元素添加一个独特的属性（如data-v-f3f3eg9），然后在样式中使用这个属性来选择元素，实现样式的局部作用。

但有时我们可能需要在这个样式块中添加一些全局样式。我们首先可以使用::v-deep或者>>>等方式来进行深度选择，不过这只能作用于当前组件内的子组件、子元素。而且无法影响同级或者上级组件、元素。如果我们需要真正的全局样式，那么我们可以使用:global标记来实现。

:global 是 CSS 模块（CSS Modules）的一个特性，它允许你在模块化 CSS 中编写全局样式。在 CSS 模块中，所有的类名默认都是局部作用域的，也就是说它们只在当前 CSS 文件中有效。但在需要设置一些全局样式，这时就可以使用 :global特性。在单文件组件（.vue文件）的 <style>标签中加入 scoped 属性， Vue 就会把这个样式块视为模块化 CSS。如果没有 scoped，那么所有的样式都会默认为全局样式，:global 就没有意义了。（所以单独写一个<style>，其内部样式也都是全局样式~）。

在文件A.vue中：

<style lang="scss" scoped>
// 定义全局类名 其样式也变为全局样式
:global(.global-class) {
  color: red;
}
// 定义一个普通的局部样式 
.normal-class {
	// 使用 !important 提升优先级
	color: yellow!important;
}
</style>

A.vue同级目录下的B.vue文件中：

<!-- 类名 normal-class 位于后面  优先级更高 -->
<h1 class="global-class normal-class">测试:global全局样式</h1>

页面表现：

元素只受到全局样式.global-class的影响：

6f9ab40fd7fc4122b1ef73821bcda317

2、在`<style>`内部使用`v-bind`给`CSS`属性绑定属性值

在 Vue.js 的单文件组件（.vue文件）中，如果我们想要动态的修改一个元素的样式，可以采取的方法有：① 设置行内style样式；② 动态设置类名。现在，我发现了第三种方法，原来Vue提供的v-bind语法糖是可以直接在<style>内部使用的，绑定声明的变量，而且实现了双向绑定，我们只需要通过修改变量值，即可动态修改元素样式。

Vue版本需要在v2.7以后。

注意：绑定的变量必须是在data中声明的，否则无法绑定。

使用语法：

/* 变量名之前不需要加this */ 
css属性名: v-bind(变量名);

具体案例：

<template>
  <div>
    <h1>测试在style内部使用v-bind给CSS属性绑定属性值</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 声明样式变量
      color: "red",
    };
  },
  mounted() {
    // 动态修改变量值
    setTimeout(() => {
      this.color = "blue";
    }, 2000);
  },
};
</script>

<style lang="scss" scoped>
h1 {
  font-size: 30px;
  /* 绑定样式变量 */
  color: v-bind(color);
}
</style>

页面效果：

初始：

在这里插入图片描述

两秒后：

在这里插入图片描述

3、父子组件传值时，使用`.sync`修饰符后，可直接在子组件中通过`$emit('update:propName')`来更新父组件中绑定的数据。

正常情况下，Vue中的数据流是单向的，即从父组件向子组件传递数据。子组件如果想要修改传递的数据，只能通过$emit()向父组件传递事件，然后父组件监听绑定对应的处理函数，触发后修改数据，然后再自动把修改后的数据传递给子组件，子组件接收的数据才会更新。这实在是太麻烦了。

为了简化这个流程，Vue给我们提供了.sync 这个修饰符，用于实现父子组件之间的双向绑定。在父组件向子组件传值时，使用该修饰符后，我们就可以直接在子组件中通过$emit('update:propName')来更新数据。这样代码更简洁，逻辑更清晰。

父组件：

<template>
  <div>
    <h1>这是父组件{{ count }}</h1>
    <!-- 向子组件传递数据并使用sync修饰符 -->
    <son :count.sync="count"></son>
  </div>
</template>

<script>
import son from "../components/son.vue";
export default {
  components: {
    son,
  },
  data() {
    return {
      count: 1,
    };
  },
};
</script>

子组件：

<template>
  <div>
    <h3 @click="add()">这是子组件{{ count }}</h3>
  </div>
</template>

<script>
export default {
  props: {
    // 接收父组件传递过来的值
    count: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    add() {
      // 子组件直接修改父组件传递的值
      this.$emit("update:count", this.count + 1);
    },
  },
};
</script>

页面效果：

初始状态：

在这里插入图片描述

点击后：

在这里插入图片描述

4、利用`v-bind`同时向DOM元素绑定多个`attribute`属性。

我们有时需要向同一个DOM动态的添加多个attribute属性，比如id、style、class等等，在之前我常用的方法是，利用v-bind依次给每个attribute属性绑定对应的变量，但是这样会让HTML变得比较繁琐，而且变量之间的关联性也不强。

现在我发现了另外一种方法：首先我们声明一个Object类型的变量，将所有要添加的attribute属性，以键值对的形式，添加为Object对象的属性，然后再通过v-bind直接将该对象绑定到对应的DOM元素上即可。这样Vue会自动将对象中的所有属性键值对，以attribute属性的形式绑定到对应的DOM元素上，而且还会对属性进行过滤，值为''、null、undefined、false的属性不会被添加到DOM元素上。

案例代码：

<template>
  <div>
    <!-- v-bind绑定js对象 -->
    <div v-bind="objectOfAttrs">测试v-bind 绑定多个attribute</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      objectOfAttrs: {
        id: "test",
        class: "test-box",
        style: "",
        title: null,
        "data-test": undefined,
        "data-test2": false,
        "data-test3": true,
      },
    };
  },
};
</script>

页面效果：

在这里插入图片描述

5、Vue指令结合动态参数，动态改变DOM元素的属性或改变监听的事件。

如果我们想要动态的改变DOM元素的属性或改变监听的事件，我们可以结合对应的Vue指令来实现该功能。但是动态参数中表达式的值应当是一个字符串，或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。

还需注意浏览器的HTML规则对空格、引号等特殊字符以及属性名的大写字母有限制，要尽量避免使用这些不合法字符，如果是大写字母的话，浏览器会自动将其转换为小写。

案例代码：

<template>
  <div>
    <div :[domAttr]="domAttrValue" @[domFunc]="domFuncValue">
      动态变更DOM属性和事件
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      domAttr: "title",
      domFunc: "click",
      domAttrValue: "test",
      domFuncValue: this.func,
    };
  },
  methods: {
    func(e) {
      console.log(e.type);
    },
  },
};
</script>