前端工程化：Vue3（二）

本文为个人学习笔记整理，仅供交流参考，非专业教学资料，内容请自行甄别

---

一、Vue生命周期

  Vue 的生命周期是指一个 Vue 实例从创建、挂载、更新到销毁的整个过程。Vue 提供了多个生命周期钩子，可以在这些钩子函数中执行特定逻辑，比如发起请求、DOM 操作、清理定时器等。
  主要包含created、mounted、updated和destroyed，以及对应的before，一共八个状态。

beforeCreate -> created
beforeMount -> mounted
beforeUpdate -> updated
beforeDestroy -> destroyed

<script setup lang="ts">
import {onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref} from "vue";let count = ref(0);function addCount() {count.value++;
}//生命周期钩子函数//挂载
onBeforeMount(() => {console.log("挂载前 btn01按钮：" + document.getElementById("btn01"))console.log("挂载前 count：" + count.value)
})onMounted(() => {console.log("挂载完成 btn01按钮：" + document.getElementById("btn01"))console.log("挂载完成 count：" + count.value)
})//更新
onBeforeUpdate(() => {console.log("更新前 btn01内容：" + document.getElementById("btn01").innerHTML)console.log("更新前 count：" + count.value)
})onUpdated(() => {console.log("更新完 btn01内容：" + document.getElementById("btn01").innerHTML)console.log("更新完 count：" + count.value)
})</script><template><button id="btn01" @click="addCount">点了:{{ count }}</button>
</template><style scoped></style>

  挂载前的阶段，变量的值有，但是元素的值没有。当挂载完成后，才能获取到元素的值。

  点击页面上的按钮，触发更新前和更新完成的生命钩子，在更新前，变量的值实际上已经发生了改变，但是元素上的值并没有更改，只有触发更新完成的事件后，元素上的值才会发生改变。

二、父子组件传值

2.1、父组件传值子组件

  父组件给子组件传值，是单向数据流，即父组件的值只会对子组件产生影响，如果需要父组件传值给子组件，在父组件中需要引入子组件，并且指定需要传给子组件的属性：

<script setup lang="ts">
import {ref} from "vue";
import Son from "./Son.vue";let money = ref(100)
let text = ref(['青天明镜映红尘', '度世舟上望苦海', '逍遥自在终超脱','彼岸之中看苍生'])function moneyMinis(data) {money.value = money.value - data
}
</script><template><div><h2>Father</h2><!--    父组件传递给子组件，单向数据流--><Son :money="money" :text="text" @buy="moneyMinis"></Son><button @click="money += 100">充值</button></div>
</template><style scoped></style>

  子组件如果需要接收父组件的值，则需要通过defineProps定义父组件传值的属性名：

<script setup lang="ts">let props = defineProps(['money', 'text']);</script><template><div style="background-color: #2fffa5"><h3>Son</h3><div>接收到父组件:{{ props.money }}</div><div>接收到父组件:<h2><li v-for="(f,i) in props.text">{{ f }}</li></h2></div></div>
</template><style scoped></style>

2.2、子组件传值子组件

  子组件给父组件传值，首先子组件需要使用defineEmits定义传值的事件名，然后使用emits进行传值。案例中是子组件有一个"扣款"的按钮，点击后触发buy函数，利用buy函数中的emits向父组件传值：

<script setup lang="ts">let props = defineProps(['money', 'text']);// 给父组件传值
let emits = defineEmits(['buy']);function buy() {emits('buy', 5)
}
</script><template><div style="background-color: #2fffa5"><h3>Son</h3><div>接收到父组件:{{ props.money }}</div><div>接收到父组件:<h2><li v-for="(f,i) in props.text">{{ f }}</li></h2></div><div><button @click="buy">扣款</button></div></div>
</template><style scoped></style>

  在父组件中，通过@子组件的defineEmits中定义的事件名，绑定一个函数，在函数中接收子组件传递的值，并且进行操作：

<script setup lang="ts">
import {ref} from "vue";
import Son from "./Son.vue";let money = ref(100)
let text = ref(['青天明镜映红尘', '度世舟上望苦海', '逍遥自在终超脱','彼岸之中看苍生'])function moneyMinis(data) {money.value = money.value - data
}
</script><template><div><h2>Father</h2><!--    父组件传递给子组件，单向数据流--><Son :money="money" :text="text" @buy="moneyMinis"></Son><button @click="money += 100">test</button></div>
</template><style scoped></style>

三、Slot插槽

  如果父子组件之间，想要传递一些自定义的内容，可以使用插槽，例如子组件的标题想要使用父组件提供的，在子组件中可以使用slot标签，指定属性名：

    <h3><slot name="title"/></h3>

  然后在父组件中通过template的v-slot指令指定属性名，这样template标签中的值会传递给子组件。

     <template v-slot:title>Son</template>