元件通訊傳值

方法

• Slot插槽--父向子內容分發,子元件只讀
• mixin混入--定義公共變數或方法,mixin資料不共享,元件中mixin例項互不影響
• provide+inject
• prop+$emit
• route路由傳參
• Vuex/pinia(Vue3)

slot插槽

#具名插槽
父元件中：
<template v-slot:demo2>
    <!--v-slot可簡寫成‘#’-->
    <ul> 
          <li>我</li>
          <li>愛</li>
          <li>你</li>
   </ul>
</template>
子元件中：
 <slot name="demo1"></slot>
#作用域插槽
父元件中：
<Son>
	<template scope="formSon"> 
	<!-- dataSource來子元件  -->
		<ul>
		  <li v-for="(k,index) in dataSource" :key="index">{{k}}</li>
		 </ul>
	</template>
</Son>
子元件中：
<slot :dataSource="dataSource"></slot>
export default {
   //資料在子元件自身
    data() {
     	return {
            dataSource:['lht','lht1','lht2','lht3']
                }
            },
 }