做网站需要编程?,淘客WordPress主题,centos7更新Wordpress,外贸拓客软件一、汇总
本博客#xff0c;记录了一些Vue在日常开发工作中比较实用的小技巧#xff0c;后续会陆续添加更新。
1、利用Sass的:global定义全局样式。
2、在style内部使用v-bind给CSS属性绑定属性值。
3、父子组件传值时#xff0c;使用.sync修饰符后…一、汇总
本博客记录了一些Vue在日常开发工作中比较实用的小技巧后续会陆续添加更新。
1、利用Sass的:global定义全局样式。
2、在style内部使用v-bind给CSS属性绑定属性值。
3、父子组件传值时使用.sync修饰符后可直接在子组件中通过$emit(update:propName)来更新父组件中绑定的数据。
4、可在main.js中通过app.config.globalProperties.***声明全局变量。
5、通过Vue3新增的Teleport内置组件将组件内的HTML渲染到指定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 langscss scoped
// 定义全局类名 其样式也变为全局样式
:global(.global-class) {color: red;
}
// 定义一个普通的局部样式
.normal-class {// 使用 !important 提升优先级color: yellow!important;
}
/style
A.vue同级目录下的B.vue文件中
!-- 类名 normal-class 位于后面 优先级更高 --
h1 classglobal-class normal-class测试:global全局样式/h1页面表现
元素只受到全局样式.global-class的影响 2、在style内部使用v-bind给CSS属性绑定属性值
在 Vue.js 的单文件组件.vue文件中如果我们想要动态的修改一个元素的样式可以采取的方法有① 设置行内style样式② 动态设置类名。现在我发现了第三种方法原来Vue提供的v-bind语法糖是可以直接在style内部使用的绑定声明的变量而且实现了双向绑定我们只需要通过修改变量值即可动态修改元素样式。
注意绑定的变量必须是在data中声明的否则无法绑定。
使用语法
/* 变量名之前不需要加this */
css属性名: v-bind(变量名);具体案例
templatedivh1测试在style内部使用v-bind给CSS属性绑定属性值/h1/div
/templatescript
export default {data() {return {// 声明样式变量color: red,};},mounted() {// 动态修改变量值setTimeout(() {this.color blue;}, 2000);},
};
/scriptstyle langscss scoped
h1 {font-size: 30px;/* 绑定样式变量 */color: v-bind(color);
}
/style页面效果
初始 两秒后 3、父子组件传值时使用.sync修饰符后可直接在子组件中通过$emit(update:propName)来更新父组件中绑定的数据。
正常情况下Vue中的数据流是单向的即从父组件向子组件传递数据。子组件如果想要修改传递的数据只能通过$emit()向父组件传递事件然后父组件监听绑定对应的处理函数触发后修改数据然后再自动把修改后的数据传递给子组件子组件接收的数据才会更新。这实在是太麻烦了。
为了简化这个流程Vue给我们提供了.sync 这个修饰符用于实现父子组件之间的双向绑定。在父组件向子组件传值时使用该修饰符后我们就可以直接在子组件中通过$emit(update:propName)来更新数据。这样代码更简洁逻辑更清晰。
父组件
templatedivh1这是父组件{{ count }}/h1!-- 向子组件传递数据并使用sync修饰符 --son :count.synccount/son/div
/templatescript
import son from ../components/son.vue;
export default {components: {son,},data() {return {count: 1,};},
};
/script子组件
templatedivh3 clickadd()这是子组件{{ count }}/h3/div
/templatescript
export default {props: {// 接收父组件传递过来的值count: {type: Number,default: 0,},},methods: {add() {// 子组件直接修改父组件传递的值this.$emit(update:count, this.count 1);},},
};
/script页面效果
初始状态 点击后 4、可在main.js中通过app.config.globalProperties.***声明全局变量。
如果我们想要在项目中定义一个变量该变量可以在全局任何一个组件中被访问到除了使用Vuex之外我们还可以通过在main.js中通过app.config.globalProperties.***声明全局变量的方式来实现该需求。ding该方式需要借助Vue的createApp()方法因此只能在Vue3及之后的版本中使用。
但是要注意通过app.config.globalProperties定义的全局变量不支持双向绑定因为这种方式只是将变量添加到Vue实例的原型链上使得在组件中可以通过this关键字来访问全局变量因此该方式适用于初始定义变量值之后基本不会进行改动且不需要双向绑定的情况。
main.js文件定义全局变量
// 导入createApp()函数
import { createApp } from vue
// 导入App组件
import App from ./App.vue
// 创建App应用返回对应的实例对象
const app createApp(App);
// 挂载全局变量
app.config.globalProperties.$overallObj { value: 111, name: 全局对象 };
app.config.globalProperties.$overallString 111全局字符串11111;
// 挂载实例对象
app.mount(#app)单文件组件.vue文件中调用全局变量
templatedivh1 clickchangeValue()这个地方是调用的main.js中定义的全局字符串 --- {{ this.$overallString }}/h1h1这个地方是调用的main.js中定义的全局对象 --- {{ this.$overallObj }}/h1/div
/templatescript
export default {methods: {changeValue() {console.log(修改前的全局字符串---, this.$overallString);console.log(修改前的全局对象---, this.$overallObj);this.$overallString 我是改变后的全局字符串;this.$overallObj.name 我是改变后的全局对象;console.log(修改后的全局字符串---, this.$overallString);console.log(修改后的全局对象---, this.$overallObj);},},
};
/script页面效果
初始效果 触发点击事件后 5、通过Vue3新增的Teleport内置组件将组件内的HTML渲染到指定DOM下。
在某些情况下我们希望组件的某些内容不渲染在当前组件的位置而是渲染到别的DOM元素下面。最常见的场景就是模态框弹窗组件的实现我们可以通过给弹窗设置position: fixed;来做到全屏展示但是这样写必须限制祖先元素的样式不能有 transform、perspective 或者 filter 样式属性因此不太友好。Vue3给我们提供了一种新的实现方案就是Teleport内置组件。
Teleport 是 Vue 3 的新特性用于将组件内的子节点传输/移动到 DOM 的其他位置。Teleport 接收一个 to 属性来指定传送的目标。to 的值可以是一个 CSS 选择器字符串也可以是一个 DOM 元素对象。设置完在页面渲染成后就会发现组件内的子节点渲染到了目标DOM元素下成为其子节点。但是Teleport 挂载时传送的 to 目标必须已经存在于 DOM 中。
Teleport 只改变了渲染的 DOM 结构它不会影响组件间的逻辑关系。Teleport 内部的节点能够正常的与其所在组件内的数据进行数据交互。
组件代码
templatediv!-- 指定内部节点渲染到body元素下 --Teleport tobodyh1这个组件用来测试Teleport内置组件的作用/h1/Teleport/div
/template页面效果
