目錄
生命周期
父傳子
常用加值方法
代碼抽離
生命周期
組合式 API 上的生命周期鉤子與選項式 API 的名稱相同，但前綴為 on：即 mounted 看起來像 onMounted，
setup() {//setup組合式api的入口函式,在beforeCreate之前執行
const count=ref(0)
console.log('setup');
onBeforeMount(() => {//組件掛載到節點之前執行
console.log('組件掛載到節點之前onBeforeMount');
})
onMounted(() => {
console.log('onMounted組件掛載完成');
})
onBeforeUpdate(() => {//組件更新前執行
console.log('組件更新前執行onBeforeUpdate');
})
onUpdated(() => {//組件更新完成后執行
console.log('組件更新完成后執行onUpdated');
})
onBeforeUnmount(() => {
console.log('組件卸載之前執行onBeforeUnmount');
})
onUnmounted(() => {
console.log('組件卸載完成后onUnmounted');
})
return{
count
}
}父傳子
// father組件
setup() {
//father作為父級組件,通過provide函式提供資料共享(不限層次)
// provide只能向下傳遞資料,向子孫組件傳遞資料
provide('globalVal','這是father組件傳遞過來的值')
const str = ref('str')
provide('globalStr',str)
return{
str
}
}
// One組件
setup() {
const val = inject('globalVal')
const str = inject('globalStr')
provide('globalStr','這是one組件傳遞過來的值')
return {
val,
str
}
}
// Two組件
setup() {
// inject通過自定的函式名獲取到父級組件的共享資料
const val = inject('globalVal')
// 父組件和爺組件都有globalStr,參考近的父組件內容
const str = inject('globalStr')
return {
val,
str
}
} 常用加值方法
const addUser = () => {
// alert(data.val);
// 向陣列的前面加一條資料
// 向前添加
data.todos.unshift({ name: data.val, show: false });
// data.todos.push(//向后添加
// {name:data.val,show:false}
// )
data.val = "";
};代碼抽離
import userAdd from '../hook/userAdd.js'
export default {
setup() {
const {total,val,todos,addUser} = userAdd();
return{
total,val,todos,addUser
}
},
};
// 自定義函式
// function userAdd() {
// const data = reactive({
// val: "",
// todos: [
// { name: "學習", show: false },
// { name: "敲代碼", show: false },
// ],
// });
// const addUser = () => {
// // alert(data.val);
// // 向陣列的前面加一條資料
// // 向前添加
// data.todos.unshift({ name: data.val, show: false });
// // data.todos.push(//向后添加
// // {name:data.val,show:false}
// // )
// data.val = "";
// };
// const total = computed(() => data.todos.length);
// return {
// ...toRefs(data),
// addUser,
// total,
// };
// }- 博主公_號：前端老實人，期待各位小伙伴加入同學們一起學習的隊伍哦?
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/302254.html
標籤：其他
上一篇：javaScript基本函式