博客

	vue3 获取$attrs的方式
	<Attrs title="this is title" :data="attrsData"/>
	<script setup>
	 import Attrs from "./components/Attrs/Attrs"
	 let attrsData = reactive(
	    [
	      {
	        id: 1,
	        name: 'gq'
	      }
	    ]
	)
	</script>
	// 来到Attrs 组件中 官网也说这种方式其实不常见的
	import {useAttrs} from "vue"
	const attrs =  useAttrs();
--------------------分割------------------------------------------
	provide 提供一个数据，并且无论嵌套多少层子组件都是可以获取到数据的
	let labelData = reactive(
    {
      name: 'gq',
      sex: '男',
      labelArray: [
        {
          address: '大连'
        },
        {
          address: '上海'
        }
      ]
    }
	)
	provide('label', labelData);
	其他组件的位置
	import {inject} from "vue"
	let  data=  inject('label');
	console.log(data);   
-------------------分割--------------------------------------------
	这是兄弟组件相互传递参数
	event bus 配置 
	npm  install mitt -s
	创建一个 mitt的文件夹并添加 	mitt.js
	import mitt from 'mitt';
	const mittBus = mitt();
	export default mittBus;
	//使用方式
	<script  setup>
	import bus from "../../mitt/mitt"
	const sendBrothValue = () => {
	  bus.emit('ok', 'this is  a  message')
	}
	</script>
	// 接收方式
	<script setup>
	import bus from "../../mitt/mitt"
	import {onMounted,onUnmounted} from "vue";
	onMounted(() => {
	  bus.on('ok', (value) => {
	    console.log(value);
	  })
	})
	// 组件销毁,删除中转站的监听
	onUnmounted(()=>{
	  bus.off('ok');
	})
	</script>