Vue3学习日记 Day2 —— 父子组件通信，模板引用，vue3.3新特性

一、组合式API下的父子组件通信

1、父传子

	1、基本思想
	    1.1、父组件中给子组件绑定属性
	    1.2、子组件内部通过props接收
	2、用法
	    2.1、父组件
	        <conComVue message="this is app">
	    2.2、子组件
	        //由于写了setup，因此无法直接使用props选项
	        //所以需要通过defineProps“编译器宏”接收子组件传递的数据
	        const props = defineProps({
	            message:String        
	        })
	        ...
	        {{ message }}
	        
	3、defineProps原理
	      //编译阶段的一个标识，编译器解析时，遇到后进行编译转换
	      

2、子传父

	1、基本思想
	    1.1、父组件中给子组件通过@绑定事件
	    1.2、子组件内部通过emit方法触发事件
	2、用法
	    2.1、父组件
	        //@子组件传递的标识符="触发的函数"
	        <sonComVue @get='getMessage'>
	    2.2、子组件
	        const emit = defineEmits(['get-message'])
	        const sendMsg = () => {
	            //传递给父组件的标识符，传递的参数                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
	            emit('get', 'this is son')        
	        }
	        

3、跨父子通信

	1、概念
	    顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信
	    
	2、用法
	    2.1、顶层组件通过provide函数提供数据
	        provide('key',顶层组件中的数据)
	        
	    2.2、底层组件通过inject获取数据
	        const message = inject('key')
	3、注
	    若想要在底层组件修改顶层组件数据，应该借由顶层组件提供的方法实现
    

二、模板引用

1、模板引用的概念

	1、概念
	    通过ref标识获取真实的dom对象或者组件实例对象
	    
	2、用法
	    2.1、调用ref函数生成一个ref对象
	        const h1Ref = ref(null)
	    2.2、通过ref标识绑定ref对象到标签
	        <h1 ref="h1Ref">DOM标签</h1>
	    //绑定后，h1Ref中就有了h1的组件信息，通过h1Ref.value便可以访问到绑定的元素
	    
	3、注
	    3.1、若要访问绑定的元素，必须要在绑定的元素加载完成之后
	    3.2、父元素不可以直接获取子元素中的信息，因为在<script setup>语法糖下，组件内部的属性和方法是不开放的，通过defineExpose编译宏指定哪些属性和方法允许访问
	        const conut = 999
	        const sayHi = () =>{
	            console.log('Hi')        
	        }
	        defineExpose({
	            count,
	            sayHi        
	        })
	        

二、vue3.3新特性

1、defineOptions

	1、概念
	    在使用了<script setup>后，无法再方便的使用props、emits、name等属性，于是便引入了defineProps和defineEmits，可也只能解决这两个属性，
	    若要解决其他属性的问题，应该使用defineOptions
	2、示范
	    defineOptions({
	        name:'GuGe'
	    })
	    

2、defineModel

	1、概念
	    在vue3中，若想接受v-model的数据，会很麻烦，于是引入了defineModel
	2、用法
	    2.1、父组件
	        let isVisible = 123
	        ...
	        <child v-model="isVisible">
	        
	    2.2、子组件
	        import { defineModel } from 'vue'
	        const modelValue = defineModel()
	        ...
	        modelValue.value = 100
	        //可以直接修改
	        
	3、注
	    3.1、若想使用defineModel，需要在vite.comfig.js中进行修改
	        plugins:[
	            vue({
	                script:{
	                    defineModel:true                
	                }            
	            })        
	        ]