基础父组件： 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...
v-on:click=”” 缩写为 @click 在內联事件处理器中访问事件参数在內联事件中访问原生 DOM 事件： 向处理器中传入一个 $event 变量123<button @click="warn('message1', $event)">Submit</button> 使用内联箭头函数123<butto...
事件捕获和事件冒泡 是浏览器处理DOM元素事件的两种方式（顺序：先捕获，再冒泡）。 123456<!DOCTYPE html><html> <body> <div>click me</div> </body></html> 事件捕获事件捕获从文档根节点开始，逐级向下传播到目标元素。 点击 di...
