技術標籤：vue3

// 註冊全域性元件
import HelloWorld from '@/components/HelloWorld.vue'
const app = createApp(App)

//全域性掛載屬性和方法
// 方法一：
app.config.globalProperties.$Test = () => {
    return '全域性掛載屬性和方法'
}

// 方法二：提供/注入 後續詳細介紹
// app.provide('$Test', 'hi')
app.use(store).use(router).component('HelloWorld', HelloWorld)
 
.provide('$Test', 'hi').mount('#app')


// .vue檔案

setup(){
	// 接收方法一
	const { ctx } = getCurrentInstance()
    let test1 = ctx.$Test
	// 接收方法二
	let test2 = inject('$Test')
}

setup:

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png"
 
 />
    <div @click="plusOne">{{ name }}-{{ age }}</div>
    <Child />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>



setup(props, context)
// props是一個形參, 元件接收的props資料可以訪問到
// context上下文物件,可以通過context來訪問vue的例項this
 {
	/**
	1、setup函式處於生命週期beforeCreate和Created兩個鉤子函式之間，無法使用data和methods的資料和方法,this為undefined
	2、setup函式是 Composition API（組合API）的入口
	3、方法和變數需要return出去，不然無法使用
	**/
 

   
    const { ctx } = getCurrentInstance()
    
    // ref將setup函式宣告變為響應式，包含且僅有一個value屬性
    let name = ref("xxx");
    let age = ref(18);
    // reactive 為引用型別新增響應式
    let r = reactive({a:1, b: {c:2}})
    function plusOne() {
      age.value ++
    }
	
     return {
      name,
      age,
      r,
      plusOne
    };
    onBeforeMount(() => {
      
    });
    onMounted(() => {
      
    });
    onBeforeUpdate(() => {
     
    });
    onUpdated(() => {
      
    });
    onBeforeUnmount(() => {
      
    });
    onUnmounted(() => {
      
    });
  },

provide 和 inject

grdFather.vue
import father from '@/components/father'
import { provide } from 'vue'
export default {
    name: 'grdFather',
    components: {father},
    setup(){
        let grdFather = ref('comefrom grafather')
	    // readonly包裹後可以在元件內引用時不被改變
	    provide('grdFather', grdFather)
	    // provide('grdFather', readonly(grdFather))
    }
}

father.vue
import son from '@/components/son'
import { inject } from 'vue'
export default {
    name: 'father',
    components: {son},
    setup(){
        let value= inject('grdFather')
        console.log(1, value)
        return {
            val
        }
    }
}

son.vue
import { inject } from 'vue'
export default {
    name: 'father',
    setup(){
        let value= inject('grdFather')
        console.log(2, value)
        return {
            val
        }
    }
}