vue setup
provide和inject 多成层级传输数据(非响应式):
<script setup> //father import { ref, provide } from 'vue' //provide 提供 const name = ref(5) provide('name', name) //provide 默认发送的不是响应数据 </script> <script setup> //son import {inject} from 'vue' //inject 注入 console.log(inject('name').value) </script>
defineExpose:暴露方法:
<template> <son ref='outRef'> <son/> //获取ref中的子组件方法Click() <button @click='myClick '><button/> </template> <script setup> //father import {ref} from 'vue' const outRef = ref('') function myClick(){ outRef.value.Click() } </script> <script setup> //son import {defineExpose } from 'vue' function Click(){ console.log('@click方法') } //将方法暴露出 defineExpose({Click}) </script>
defineEmits:子调用father方法
<template> <son @selectItem="selectItem"></son> </template> <script setup> //father function selectItem(num){ console.log(num); } </script> <script setup> //son import {defineEmits} from 'vue' const emit = defineEmits(['selectItem']) function choice(num){ emit('selectItem', num) } </script>
defineProps: 传参 Props:
<template> <son :name="mymsg"> </son> </template> <script setup> //father import {ref} from 'vue'<br> const mymsg=ref("holle world") </script> <template> <div>{{msg.name}}</div> </template> <script setup> //son import {defineProps} from 'vue' const msg=defineProps({ // 非ts专有声明 name:{ type:String, default: '' } }) </script>