专做网站四川聚顺成网络科技有限公司
组件基础
每一个.vue 文件都可以充当组件来使用
每一个组件都可以复用
父组件引入之后可以直接当标签使用
案例：
App.vue
<script setup lang="ts">
import BaseRefAndReactive from "./components/BaseRefAndReactive.vue";</script><template><BaseRefAndReactive></BaseRefAndReactive></template><style scoped></style>
组件的生命周期
也就是一个组件从创建到更新最后销毁的过程
在我们使用Vue3 组合式API 是没有 beforeCreate 和 created 这两个生命周期的，也就是在使用setup语法糖时
常用的生命周期钩子主要有以下六个
onBeforeMount()
在组件DOM实际渲染安装之前调用。在这一步中，dom元素还不存在。
onMounted()
在组件的第一次渲染后调用，该元素现在可用，允许直接DOM访问
onBeforeUpdate()
数据更新时调用，发生在虚拟 DOM 打补丁之前。也就是真实dom尚未更新
onUpdated()
DOM更新后，updated的方法即会调用。
onBeforeUnmount()
在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
onUnmounted()
卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
案例：
App.vue
<script setup lang="ts">
import BaseRefAndReactive from "./components/BaseRefAndReactive.vue";
import {ref} from "vue";
let flag = ref(true);</script><template><BaseRefAndReactive v-if="flag"></BaseRefAndReactive><button @click="flag = !flag">点我测试</button>
</template><style scoped></style>
组件内
<script setup lang="ts">
import { ref, Ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue'
const refData = ref("我是组件哈哈哈")
const divText = ref("我是div")
let div:Ref<HTMLDivElement | null> = ref(null)
onBeforeMount(()=>{console.log("onBeforeMount",div.value)
})
onMounted(()=>{console.log("onMounted",div.value)
})
onBeforeUpdate(()=>{console.log("onBeforeUpdate",div.value?.innerHTML)
})
onUpdated(()=>{console.log("onUpdated",div.value?.innerHTML)
})
onBeforeUnmount(()=>{console.log("onBeforeUnmount",div.value)
})
onUnmounted(()=>{console.log("onUnmounted",div.value)
})
function change() {divText.value = "我是div改变后的"
}
</script><template><div>{{refData}}</div><div ref="div">{{divText}}</div><button @click="change">改变</button>
</template><style scoped></style>执行图片
父子组件传参
父---> 子
父组件通过v-bind绑定一个数据，然后子组件通过defineProps接受传过来的值，
如果说只传一个字符串的话，不需要使用v-bind
案例
子组件
通过defineProps方法，参数传一个对象，将要接受的数据通过属性的方式写入，如果要进行一些配置也可以使用对象的形式进行配置，如title
<script setup lang="ts">
defineProps({title: {type: String,default: 'Hello World'},list: Array
})
</script><template><div><h1>{{ title }}</h1><ul><li v-for="(item,index) in list" :key="index">{{ item }}</li></ul></div>
</template><style scoped></style>如果要在setup内使用就需要接受defineProps的返回值，返回值为对象类型属性就是传过来的数据
const data = defineProps({
title: {
type: String,
default: 'Hello World'
},
list: Array
})
data.title
使用ts的方式，一泛型的方式去接受数据
defineProps<{title: string,list: number[]
}>()
如果像指定默认值，需要使用withDefaults方法，在第二个参数处以对象属性的形式指定，为了防止引用冲突，数组对象等采用工厂形式返回
withDefaults(defineProps<{title: string,list: number[]
}>(), {title: 'default title',list: () => [1,2,3]
})
父组件内
<script setup lang="ts">
import BaseRefAndReactive from "./components/BaseRefAndReactive.vue";
import {ref} from "vue";
const list = ref([1,2,3,4,5])</script><template><BaseRefAndReactive title="这是标题" :list="list"></BaseRefAndReactive>
</template><style scoped></style>
子----> 父
子组件给父组件传参
是通过defineEmits派发一个事件，绑定一个自定义事件，通过一些vue有的事件去触发这个emit从而达到传值的目的
子组件内
<script setup lang="ts">
withDefaults(defineProps<{title: string,list: number[]
}>(), {title: 'default title',list: () => [1,2,3]
})
let emit = defineEmits(["on-click"])
const handleClick = () => {emit("on-click", "我是子组件1",123,"as",{name:"张三"})
}
</script><template><div><h1>{{ title }}</h1><ul><li v-for="(item,index) in list" :key="index">{{ item }}</li></ul><button @click="handleClick">传值</button></div>
</template><style scoped></style>使用ts的方式，限制参数更加严格
let emit = defineEmits<{(e: "on-click", name: string,age: number): void
}>()
const handleClick = () => {emit("on-click", 'zhangsan', 18)
}
父组件
<script setup lang="ts">
import BaseRefAndReactive from "./components/BaseRefAndReactive.vue";
import {ref} from "vue";
const list = ref([1,2,3,4,5])
const handleClick = (name:string,...args) => {console.log(name,"父------>")console.log(args)
}
</script><template><BaseRefAndReactive title="这是标题" :list="list" @on-click="handleClick"></BaseRefAndReactive>
</template><style scoped></style>
子组件暴露给父组件内部属性
通过defineExpose
子组件
<script setup lang="ts">
import { ref,reactive } from 'vue'
const list = reactive([1,2,3,4,5])
const str = ref('hello')
defineExpose({list,str
})
</script><template><div><p>ref:{{str}}</p></div>
</template><style scoped></style>父组件
<script setup lang="ts">
import BaseRefAndReactive from "./components/BaseRefAndReactive.vue";
import {ref,onMounted} from "vue";
let refBase = ref(null);
onMounted(()=>{console.log(refBase.value);
})
</script><template><BaseRefAndReactive ref="refBase"></BaseRefAndReactive>
</template><style scoped></style>
注意需要在onMounted里打印的原因是，setup的生命周期早于子组件挂载，也就是子组件还没有挂载就打印输出所以会是undefined