vue笔记(四)指令、v-bind、冒号、#default、defineProps等宏编译器

文章目录

指令

指令是vue在模板语法中的核心功能，是将响应式数据映射到视图的最主要方式。"

6大核心指令是早期的说法，vue1就已经成型了，所以v-slot不再6大指令之内。

v-bind指令

用于动态绑定属性，简写:(冒号)，或者:是v-bind的语法糖。

v-on指令

用于事件监听，简写@，或者@是v-on的语法糖。

常见的如：

html 复制代码

@click="add" 相当于 v-on:click="add"
@input="handleInput" 相当于	v-on:input="handleInput" # 监听input事件
@submit.prevent="onSubmit" 相当于	v-on:submit.prevent="onSubmit" # 可以同时使用修饰符

v-model指令

用于双向绑定。

v-if/v-else-if/v-else指令

用于条件渲染。

v-show指令

用于(显示/隐藏)。

v-for指令

用于列表渲染。

v-slot指令

v-slot指令和slot标签不是一回事。

slot标签是占位符，v-slot是指令，两者经常配合使用。

简写#(井号)，或者#是v-slot的语法糖。

#default相当于v-slot:default。

例如：

这句话的意思是fetchData.vue的默认插槽替换为该template的内容。

html 复制代码

<FetchData url="/mysite/api/sysUser/query" :params="{ pageNum: 1, pageSize: 3 }">
        <template #default="{ data, loading, error, refresh }">

vue的绑定规则

指令	绑定值要求	示例
`v-bind` (`:`)	任意 JS 表达式	`:class="className"`、`:style="styleObj"`
`v-on` (`@`)	方法名或 JS 表达式	`@click="handle"`、`@click="count++"`
`v-if` / `v-else-if`	布尔值表达式	`v-if="isVisible"`
`v-for`	可迭代数据	`v-for="item in list"`
`v-model`	响应式变量	`v-model="username"`
`v-show`	布尔值表达式	`v-show="isShown"`
`v-html`	字符串	`v-html="htmlContent"`
`v-slot` (`#`)	解构对象	`#default="{ data, loading }"`

defineProps等宏编译器

这些都是内置的函数。

defineProps # 定义组件接收的 props

defineEmits # 定义组件触发的事件

defineExpose # 暴露组件内部的属性/方法给父组件

defineOptions # 定义组件选项(如 name、inheritAttrs)

defineSlots # 定义插槽类型(TypeScript 中使用)

defineModel # 简化 v-model 绑定(Vue 3.4+)

defineProps

defineProps数组语法(简单声明)

html 复制代码

<script setup>
// 只声明 prop 名称，不验证类型
defineProps(['url', 'params', 'immediate'])
</script>

defineProps对象语法(带验证)(推荐)

html 复制代码

<script setup>
defineProps({
  url: {
    type: String,
    required: true
  },
  params: {
    type: Object,
    default: () => ({})  // 对象/数组默认值必须用工厂函数
  },
  immediate: {
    type: Boolean,
    default: true
  }
})
</script>

defineProps是如何实现参数传递的呢?

在父组件中，通过:属性绑定来传递参数，例如：

html 复制代码

<FetchData url="/mysite/api/sysUser/query" :params="{ pageNum: 1, pageSize: 3 }">