Vue3中的状态驱动的动态CSS、注册组件

目录

动态CSS

 注册组件

1、组件内部，和vue2 一样

2、语法糖形式，即将setup写入script标签中

3.注册全局组件

4.定义同步组件:

5、定义局部异步组件:

5-1组件内部

5-2setup语法糖:

5-3定义全局异步组件:

---

动态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之前注册全局组件 否则使用不了