vue3基础知识

defineProps去接收父组件传递过来的方法

let props = defineProps(['data', 'info'])

defineEmits 接收父组件传递的自定义事件

let emits = defineEmits(['onChange'])

useAttrs可以获取到组件身上的属性和事件

import {useAttrs} from "vue";
const attrs = useAttrs();
const props = defineProps(['title']);
// props和attrs都可以获取父组件传递过来的属性和属性值
// 但是props接收了，useAttrs方法就获取不到了，props的优先级高于useAttrs

defineExpose方法, 对外暴露

// 父组件
<Son ref="son" />
let son = ref();
// 拿到儿子的钱
son.value.money
// 子组件
defineExpose({
  money
})

$parent，子组件拿父组件的属性和方法

// 父组件
defineExpose({
	money
})
// 子组件
<button @click="handler($parent)">拿到父组件的属性和方法</button>
const handler = ($parent)=>{
	console.log($parent);
	$parent.money = 1000;
}

组建通信方式之provide与inject

// provide(提供)，inject(注入) ，实现隔辈组件的数据传递
// 父组件
let car = "兰博基尼"
// provide：两个参数，第一个参数就是提供的数据key
//第二个参数:祖先组件提供数据
provide("token", car)

// 孙子组件
let car = inject("token")

pinia

vuex:集中式管理状态容器，可以实现任意组件之间通信！
核心概念：state、mutations、action、getters、modules

pinia:集中式管理状态容器，可以实现任意组件之间通信！
核心概念：state、action、getters

slot

• 默认插槽

• 具名插槽

• 作用域插槽：就是可以传递数据的插槽，子组件可以将数据回传给父组件，父组件可以决定这些回传数据是以何种结构或者外观在子组件内部去展示

// 父组件
<Test1 :todos="todos">
      <template v-slot="{ $row, $index }">
        <p :style="{ color: $row.done ? 'green' : 'red' }">
          {{ $row.title }}--{{ $index }}
        </p>
      </template>
    </Test1>
// 插槽组件
<div class="box">
    <h1>作用域插槽</h1>
    <ul>
      <li v-for="(item, index) in todos" :key="item.id">
        <!--作用域插槽:可以讲数据回传给父组件-->
        <slot :$row="item" :$index="index"></slot>
      </li>
    </ul>
  </div>