基础插槽内容可以为文本、模版、组件
1234<!-- 父组件 --><FancyButton> Click me! <!-- 插槽内容 --></FancyButton>
1234<!-- 子组件 --><button class="fancy-btn"> <slot></sl...
禁用 attributes 继承如果不想一个组件自动继承 attribute，可在组件选项中设置 inheritAttrs: false
12345<script setup>defineOptions({ inheritAttrs: false});</script>
透传进来的 attribute 可在模版的表达式中用 $attrs 访...
基础父组件：
123456<CustomInput v-model="searchText" /><!-- 被展开为： --><!-- <CustomInput :model-value="searchText" @update:model-value="newValue => searc...
props注意：props 为单向数据流，从父组件流子组件，所以不应该在子组件中修改 props。
如有需要：
用另一个属性接收该 prop 的初始值；
基于该 prop 定义一个计算属性；
向父组件抛出一个事件。
声明使用字符串数组：
123<script setup>const props = defineProps(['foo']);</scr...
全局注册所有子组件可以使用全局注册的组件。
使用 vue 应用实例的 .component() 方法：
123456import { createApp } from 'vue';const app = createApp({});app.component('myComponent',{ // ...
基础父传子defineProps 是仅在 <script setup> 中可用的编译宏命令
12345<script setup>defineProps(['title', 'content']);</script><template>{{ title }}...
基础1234567891011<input ref="myInput" /><script setup> import { ref, onMounted } from 'vue'; const myInput = ref(null); // 必须和模版中的 ref 同名 onMoun...
基本用法123456789<script setup>import { ref, watch } from 'vue';const initVal = ref('');watch(initVal, (newVal, oldVal) => { ...});</script>
侦...
vue3 生命周期图示
注册生命钩子用法1234567<script setup>import { onMounted } from 'vue';onMounted(() => { console.log('now mounted');});</script>
调用 onM...
基础123<input :value="text" @input="event => text = event.target.value" />
用 v-model 简化：
1<input v-model="text" />
类型单行12<p>{{ mes...
