vue3组件的使用
个人使用vue3组件的习惯
加上css一个组件将会有四个文件
houseDetail.js中将会是组件的逻辑和变量
import { ref } from "vue"
let emits = ref(null)
let props = ref(null)
const b= ref('')
const a= ref('')
const funA = ()=>{
emits.value("fun1")
a.value = props.value.demo1
}
const funB = ()=>{
emits.value("fun2")
b.value = props.value.demo2
}
let HouseDetail = (e,p)=>{
emits.value = e
props.value = p
return {
b,
a,
funA,
funB,
}
}
houseDetail.scss 为css这个就不多说了
index.js 下写法 就两行代码
import HouseDetail from './index.vue'
export default HouseDetail
index.vue 写的就是标签结构 里面引入houseDetail.js中导出的方法 变量 并传入props父组件传来的变量和emits父组件传来的方法
<template>
<div>{{a}}</div>
<div>{{b}}</div>
</template>
<style lang="scss">
@import './houseDetail.scss';
</style>
<script setup>
import HouseDetail from './houseDetail'
const {
b,
a,
funA,
funB,
} = HouseDetail(emits,props)
const props = defineProps({
demo1:{
type:Boolean,
},
demo2:{
type:String,
}
})
const emits = defineEmits([
fun1,
fun2,
])
</script>