学习vue3 三，组件基础，父子组件传值

组件基础

每一个.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