目录
动态CSS
单文件组件的
<style>
标签可以通过v-bind
这一 CSS 函数将 CSS 的值关联到动态的组件状态上注意事项:申明的ref变量在style中是直接使用,不要 .value
<template> <div class="nav"> <h1>{ {obj.name}}</h1> <h2>{ {obj.age}}</h2> </div> </template> <script setup> import { reactive,ref} from 'vue'; let obj=reactive({name:"小狮子",age:18}) let obj2=reactive({width:"500px",height:"400px"}) let msg1=ref("pink") let msg2=ref("blue") </script> <style scoped> .nav{ width: v-bind(obj2.width); height: v-bind(obj2.height); background-color: v-bind(msg1); //不用.value color: v-bind(msg2); } </style>
效果展示
注册组件
1、组件内部,和vue2 一样
<script> import Box1 from "./Box1.vue" export defult{ components:{ Box1 }, setup(){} } </script> <template> <Box1></Box1> < /template>
2、语法糖形式,即将setup写入script标签中
<script setup> import Box1 from "./Box1.vue" //只需要导入 不用写注册代码 会在打包的时候自动帮我们注册 </script> <template> <Box1></Box1> < /template>
3.注册全局组件
//main.js文件: import { createApp} from 'vue' import App from './App.vue' const app=createApp(App) import Box1 from "./Box5.vue" app.component(Box1.name,Box1) app.mount('#app')//注意 一定要在app.mount之前注册全局组件 否则使用不了 //App.vue文件: <template> <Box1></Box1> < /template>
4.定义同步组件:
//Box1.vue文件: <script> import {defineComponent} from "vue" export default defineComponent({ data(){ return {} }, methods:{}, setup(){ } }); </script>
5、定义局部异步组件:
5-1组件内部
<script> import {defineAsyncComponent} from "vue" let Box1 = defineAsyncComponent(() => import("./Box1.vue")) //注意3.2之后不用引入defineAsyncComponent export default { components: { Box1 }, setup() {} } </script>
5-2setup语法糖:
<script setup> import Box1 from "./Box1.vue" import Box2 from "./Box2.vue" import {defineAsyncComponent} from "vue" let Box3=defineAsyncComponent(()=>import("./Box3.vue"))//注意3.2之后不用引入defineAsyncComponent,而且这个变量名直接就是注册的组件名(打包时自动注册的) </script>
5-3定义全局异步组件:
//main.js文件: import { createApp,defineAsyncComponent} from 'vue' import App from './App.vue' const app=createApp(App) let Box1=defineAsyncComponent(()=>import("./Box4.vue")) app.component("Box1",Box1) app.mount('#app')//注意 一定要在app.mount之前注册全局组件 否则使用不了