-
VUE3-18-提供/注入
提供 / 注入
该页面假设你已经阅读过了组件基础。
如果你还对组件不太了解,推荐你先阅读它。
通常,当我们需要将数据从父组件传递到子组件时,我们使用 props。
想象一下这样的结构:你有一些深嵌套的组件,而你只需要来自深嵌套子组件中父组件的某些内容。
在这种情况下,你仍然需要将 prop 传递到整个组件链中,这可能会很烦人。
对于这种情况,我们可以使用 provide 和 in...
2021-08-02 13:01:55 |
VUE
-
VUE3-17-插槽
插槽内容
Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口。
它允许你像这样合成组件:
<todo-button>
Add todo
</todo-button>
然后在 <todo-button> 的模板中,你可能有:
&l...
2021-08-02 13:01:55 |
VUE
-
VUE3-16-自定义事件
事件名
不同于组件和 prop,事件名不存在任何自动化的大小写转换。
而是触发的事件名需要完全匹配监听这个事件所用的名称。
举个例子,如果触发一个 camelCase 名字的事件:
this.$emit('myEvent')
则监听这个名字的 kebab-case 版本是不会有任何效果的:
<!-- 没有效果 -->
<my-component @my-eve...
2021-08-02 13:01:55 |
VUE
-
VUE3-15-非 Prop 的 Attribute
非 Prop 的 Attribute
一个非 prop 的 attribute 是指传向一个组件,但是该组件并没有相应 props 或 emits 定义的 attribute。
常见的示例包括 class、style 和 id 属性。
Attribute 继承
当组件返回单个根节点时,非 prop attribute 将自动添加到根节点的 attribute 中。
例如,在 <...
2021-08-02 13:01:55 |
VUE
-
VUE3-14-组件属性 Props
Prop 类型
到这里,我们只看到了以字符串数组形式列出的 prop:
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
但是,通常你希望每个 prop 都有指定的值类型。
这时,你可以以对象形式列出 prop,这些 property 的名称和值分别是 prop 各自的名称和类型:
props: {
...
2021-08-02 13:01:55 |
VUE
-
VUE3-13-组件注册
组件名
在注册一个组件的时候,我们始终需要给它一个名字。
比如在全局注册的时候我们已经看到了:
const app = Vue.createApp({...})
app.component('my-component-name', {
/* ... */
})
该组件名就是 app.component 的第一个参数,在上面的例子中,组件的名称是“my-component-na...
2021-08-02 13:01:55 |
VUE
-
VUE3-12-component basic 组件基础
基本实例
这里有一个 Vue 组件的示例:
// 创建一个Vue 应用
const app = Vue.createApp({})
// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
data() {
return {
count: 0
}
},
template: ...
2021-08-02 13:01:55 |
VUE
-
VUE3-11-forms 表单
基础用法
你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。
它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
提示
v-model 会忽略所有表单元素的 value、checked、sele...
2021-08-02 13:01:55 |
VUE