provide & inject

// vue3.x
import { provide,ref,reactive,readonly} from 'vue'
setup() {
    // 增加provide和inject之间的响应式，provide 值时使用 ref 或 reactive
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })
    const updateLocation = () => {
      location.value = 'South Pole'
    }
    provide('location', readonly(location))
    provide('geolocation',readonly(location) )
    provide('updateLocation', updateLocation)
  }

import { inject } from 'vue'
setup() {
    const userLocation = inject('location', 'The Universe')
    const userGeolocation = inject('geolocation')

    return {
      userLocation,
      userGeolocation
    }
  }

// 父组件
provide: {
    user: 'John Doe'
  }
// 子组件
 inject: ['user']
// provide 一些组件的实例 property，需要返回一个对象
provide() {
    return {
      todoLength: this.todos.length
    }
  }
// 如果需要传递响应式的数据，使用computed
provide() {
    return {
      todoLength: Vue.computed(() => this.todos.length)
    }
  }

slot

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
作用域插槽： <slot v-bind:user="user" :index='index'></slot>，user被称为插槽 prop
可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字
<template #default="slotProps">
默认插槽可以写在标签上v-slot='slotProps'
默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确

传入一个对象的所有 property

使用不带参数的 v-bind
post: {
id: 1,
title: 'My Journey with Vue'
}
<blog-post v-bind="post"></blog-post>

向子组件传递数字

:value='22'，会作为表达式取值

is 属性

1. 对于ul内部必须是li标签，使用is进行变通处理
   <ul>
   <li is="vue:blog-post-row"></li>
   </ul>
2. 动态组件
   <component :is='currentComponent' />

非 Prop 的 Attribute

常见的示例包括 class、style 和 id 属性。
当子组件只有一个根节点时，作用于根节点，并且不会覆盖子组件原有的属性

 <custom-input id="12"></custom-input>
<template>
  <div>
    哈哈哈
  </div>
</template>
渲染结果
<div id="12" data-v-469af010=""> 哈哈哈 </div>
当有多节点返回时，设置禁用继承，作用在其他元素上，class失效了

$attrs

1. 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)，比如data-status='status'、事件@click=handleClick
2. 可以通过 v-bind="$attrs" 传入内部组件，默认传递到根元素
3. inheritAttrs: false 禁止根元素继承attribute，将 attribute 应用于根节点之外的其他元素

$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器
它可以通过 v-on="$listeners" 传入内部组件

非 Prop 的 Attribute

• 当组件返回单个根节点时，一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute，而这些 attribute 会被添加到这个组件的根元素上。

将一个对象中属性都作为prop传递

post= { id: xx,title:xx} // 也可以使用sync修饰符 <blog-post v-bind.sync="post"></blog-post> props:['id',title']

使用 require.context 全局注册非常通用的基础组件

组件上使用v-model

• 父组件使用

// 组件上
< custom-input v-model="inputValue" />
// 如果子组件type="text"，等价如下写法，$event为子组件传递的参数
<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

• 子组件上

// 避免value使用目的冲突，比如type=checked，可以使用model选项
 model: {
    prop: 'checked',
    event: 'change'
  }
props: {
  checked:Boolean
}
<input :checked="checked" @change="$emit('change', $event.target.checked)" />
// 一般使用，type=text
props: ['value']
<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" />

vue3.x中使用v-model

// 组件中

< custom-input v-model="inputValue" />
相当于
<custom-input
  :model-value="searchText"
  @update:model-value="searchText = $event"
></custom-input>

// 子组件中，type='text'

props: ['modelValue'],
emits: ['update:modelValue'],
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />

如果type='checkbox'

子组件
<input type="checkbox" :checked="checked" @change="inputchange" />
  emits: ["update:modelValue"],
  props: {
    modelValue: Boolean,
  }
inputchange(event) {
      console.log("components", event.target.checked);
      this.$emit("change", event.target.checked);
    }

v-model传参

< custom-input v-model:title="inputValue" />
  emits: ["update:title"],
  props: {
    title: Boolean,
  }
 this.$emit('update:title',params)

组件上可以使用多个v-model，使用的是v-model传参

组件的data函数

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝（深拷贝）。

组件的元素上绑定事件，

需要使用.native修饰符，才起作用

<base-input v-on:focus.native="onFocus"></base-input>

组件上使用directive指令

和非 prop 的 attribute类似，当在组件中使用时，自定义指令总是会被应用在组件的根节点上。
指令不会通过 v-bind="$attrs" 被传入另一个元素
当被应用在一个多根节点的组件上时，指令会被忽略

组件上使用class

• 当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。会添加在已有类名的后面

组件上使用v-for

• 在自定义组件上，你可以像在任何普通元素上一样使用 v-for,，但是组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 prop来传递item、index、key：

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>