您现在的位置是：首页 >技术交流 >vue3 知识点网站首页技术交流

tailwindcss 与 ui库同时使用初始化问题

当vue3 使用Element plus 与 tailwindcss 时 会把element 的样式初始化掉

可以在tailwindcss 中添加

 corePlugins: {
    preflight: false,
  },

watch与watchEffect

两者同为监听器

 watch要指明监视的数据源，也较知名监视的回调

watchEffect可以自动监听回调所需的依赖，可以不用指明数据源；

watch可以访问改变之前与改变之后的值，且不会立即执行 ；如需设置可以通过immediate：true改变

watchEffect 只能访问改变之后的值，且不会立即执行

//watch
    
    watch ( num,// 指明监听的数据源
    ()=>{
    console.logo(num)
    //回调
    },{
        deep:true , //进行深度监听
        immediate:true,//使其立即执行
        }
    )

 //watchEffect

    watchEffect(()=>{
        console.log(num) 
    })

v-if 与 v-for 

在vue2中 v-for 优先级更高

所以 v-for 与 v-if 不能在一个标签内同时声明，代码会先运行 v-for 然后才会进行 v-if 的判断

 在vue3中 v-if 优先级更高

v-show与v-if

两个都是控制元素隐藏与显示的属性

v-if 通过控制dom元素的是否挂载不挂载 来判断显示与隐藏

v-show是通过display 来判断显示与隐藏 

根据不同需求来决定两者的使用

如果页面对于元素显示与隐藏的操作较少 时使用 v-if   且 v-if 可以与v-else v-elseif 搭配使用 v-show则不可以

如果要频繁操作元素的显示与隐藏则使用 v-show

组件

 在 vue3中 引入组件会进行自动注册，无需通过components手动注册。

使用defineProps 接受父组件传递的值

//父组件
<template>
    <div>
    <My_song :myname="name"></My_song>
    </div>
</template>
<script setup>
import My_song from './mysong'
import {ref} from 'vue'
const name = ref ('')
    
</script>

//子组件
<template>
    <div>
    <button>{{myname}}</button>
    </div>
</template>
<script setup>

const props = definePeops({

     myname:{
        type:string,
        
    }
})
</script>

useAttrs 可获取属性 

useSlots 获取插槽

defineEmits 获取自定义事件

组件通信方式

provide 父组件注册一个值 

inject  将值注入到子组件中

//父组件
provide：{
    message：'provided by father',
    from：'from by father',
}

//子组
inject:['message','from']

props父传子

在vue3中

// 父组件
import Song from './song.js'
引用组件

<template>
    <Song :abc='123'></Song>
</template>

//子组件
<template>
    <input> {{abc}} </input>
</template>
<script setup>
    const props = defineProps({
    abc:{
        type:String，
        require:true,//这里表示为必传属性 默认值为false
        default:''， || default:['','']， 设置默认值
        validator (value) {
            return (value.length < 5) // 进行校验 
        }
     }
    })
</script>

在vue2中

//父组件与 vue3 没有差别 这里就不多写

//子组件中
<script>
export default {
props:{
    abc:{
        type:String
    }
}
}
</script>

动态class

//1
:class="[[6 < 3 ? 'hom1' : 'hom2'], 'w-[300px] h-[300px] bg-black']"

//2
:class="[{ fs : true },'w-[300px] h-[300px] bg-black']"

pinia使用