VUE学习-组件
组件
组件是可复用的 Vue 实例,且带有一个名字。
<div id="components-demo">
<button-counter></button-counter>
</div>
<script>
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {count: 0}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});
new Vue({ el: '#components-demo' })
</script>
注意:
-
一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝
-
每个组件必须只有一个根元素
-
有些 HTML 元素,诸如 <ul>、<ol>、<table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li>、<tr> 和 <option>,只能出现在其它某些特定的元素内部。
-
全局注册的组件可以在任何父组件或者子组件使用,局部注册的组件在其子组件中不可用。
-
全局注册的行为必须在根 Vue 实例 (通过 `new Vue`) 创建之前发生。
-
当 prop 验证失败的时候,(开发环境构建版本的) Vue 将会产生一个控制台的警告。
-
对于绝大多数 attribute 来说,从外部提供给组件的值会替换掉组件内部设置好的值。class 和 style attribute 会稍微智能一些,即两边的值会被合并起来
-
inheritAttrs: false 选项不会影响 style 和 class 的绑定。
注册组件
- 全局注册:Vue.component('comp-name',{})
- 局部注册:new Vue(components:{ 'comp-name':{},comp-obj })
- 组件命名:
- my-component
- MyComponent
- 使用模块系统注册
<script> import ComponentA from './ComponentA'; export default {components: {ComponentA}} </script>
- require.context: 只全局注册这些非常通用的基础组件。
link:https://cn.vuejs.org/v2/guide/components-registration.html
自定义组件的v-model
<div id-"comp">
<base-checkbox v-model="lovingVue" ></base-checkbox>
</div>
<script>
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
//注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。
props: {checked: Boolean},
template: `<input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)">`
})
new Vue({
el: '#comp',
data:{return { lovingVue: true}},
methods:{}
})
</script>
传参
-
props
用一个 props 选项将其包含该组件可接受的 prop 列表- 可以为其指定类型props:{title: String}或者props:{title: {type: String}}
- 为其指定类型域props:
- type: [
String
|Number
|Boolean
|Array
|Object
|Date
|Function
|Symbol
|自定义的构造函数
] - 指定默认值props:{title: {default: "post-title"}}
- 指定是否必须props:{title: {required: true}}
- 指定验证函数 props:{title: {validator: function(v){return ['A','B'].indexOf(v) !== -1}}}
-
<div id="comp"> <blog-post title="My journey with Vue"></blog-post> </div> <script> Vue.component('blog-post', { props: {'title'}, template: '<h3>{{ title }}</h3>' }) new Vue(el:'#comp') </script>
-
emit 方法并传入事件名称来触发一个事件,操作父组件的data
<div id="comp"> <blog-post v-on:click-count="click += 1" title="My journey with Vue"></blog-post> </div> <script> Vue.component('blog-post', { props: {'title'}, template: `<div><button @click="$emit('click-count')">Enlarge text</button><h3>{{ title }}</h3></div>` }) new Vue(el:'#comp',data:{return {click:1}}) </script>
-
v-slot
绑定在<slot>
元素上的 attribute 被称为插槽 prop。<div id="comp"> <current-user :user='user'> <!-- 提取默认命名插槽的props --> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </current-user> <!-- 解构赋值提取默认命名插槽的user --> <current-user v-slot="{ user }">{{ user.firstName }}</current-user> <!-- 解构赋值提取默认命名插槽的user并自定义命名person --> <current-user v-slot="{ user: person }">{{ person.firstName }}</current-user> <!-- 解构赋值提取默认命名插槽的user并自定义属性默认值,用于插槽 firstName 是 undefined --> <current-user v-slot="{ user = { firstName: 'Guest' } }">{{ user.firstName }}</current-user> <!-- 动态指令参数也可以用在 v-slot 上,来定义动态的插槽名 --> <current-user v-slot:[dynamicSlotName]="{ user }">{{ user.firstName }}</current-user> <!-- v-slot:slotName="props"可以缩写成#slotName="props" --> <current-user #default="{ user }">{{ user.firstName }}</current-user> </div> <script> Vue.component('current-user',{ props:{user:Object}, template:`<span><slot v-bind:user="user">{{ user.lastName }}</slot></span>` }) new Vue({ el: '#comp', data:{ return { user{ firstName:'misuha', lastName:'White' }, dynamicSlotName:'default' } } }) </script>
-
slot & slot-scope ( 已废弃 )
<div id="comp"> <current-user :user='user'> <template slot="default" slot-scope="{user}">{{ user.firstName }}</template> </current-user> </div> <script> Vue.component('current-user',{ props:{user:Object}, template:`<span><slot v-bind:user="user">{{ user.lastName }}</slot></span>` }) new Vue({ el: '#comp', data:{ return { user:{ firstName:'sa', lastName:'wh' }, dynamicSlotName:'default' } } }) </script>
<slot>
和 HTML 元素一样,我们经常需要向一个组件传递内容
当组件渲染的时候,<slot></slot>
将会被替换为“Something bad happened.”。插槽内可以包含任何模板代码,包括 HTML
<div id="alarm-comp">
<alert-box>Something bad happened.</alert-box>
</div>
<script>
Vue.component('alert-box', {
template: `<div class="demo-alert-box"><strong>Error!</strong><slot></slot</div>`
})
new Vue(el:'#alarm-comp')
</script>
<!--默认值,它只会在插槽没有提供内容的时候被渲染。-->
<button type="submit"><slot>Submit</slot></button>
<!--具名插槽(组件名:‘base-layout’),默认值name='default'-->
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
<!--为具名插槽赋值-->
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
<!--为具名插槽赋值的缩写-->
<base-layout>
<template #header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template #footer>
<p>Here's some contact info</p>
</template>
</base-layout>
<current-user #default="{ user }">{{ user.firstName }}</current-user>
is
在不同组件之间进行动态切换
<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>
<!-- 这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部,并导致最终渲染结果出错。 -->
<table>
<blog-post-row></blog-post-row>
</table>
<!-- 这个特殊的 is attribute 给了我们一个变通的办法 -->
<table>
<tr is="blog-post-row"></tr>
</table>
禁用 Attribute 继承
如果你不希望组件的根元素继承 attribute,你可以在组件的选项中设置 inheritAttrs: false。
<script>
Vue.component('my-component', {
inheritAttrs: false,
// ...
})
</script>
$listeners
Vue 提供了一个 $listeners property
,它是一个对象,里面包含了作用在这个组件上的所有监听器。
{ focus: function (event) { /* ... */ }
input: function (value) { /* ... */ },}
有了这个 $listeners property
,你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。
<script>
Vue.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
computed: {
inputListeners: function () {
var vm = this
// `Object.assign` 将所有的对象合并为一个新对象
return Object.assign({},
// 我们从父级添加所有的监听器
this.$listeners,
// 然后我们添加自定义监听器,或覆写一些监听器的行为,这里确保组件配合 `v-model` 的工作
{input: function (event) {
vm.$emit('input', event.target.value)
}}
)
}
},
template: ` <label>{{ label }}
<input v-bind="$attrs" v-bind:value="value" v-on="inputListeners" > </label> `
})
</script>
现在
<base-input>
组件是一个完全透明的包裹器了,也就是说它可以完全像一个普通的<input>
元素一样使用了:所有跟它相同的 attribute 和监听器都可以工作,不必再使用.native
监听器。
.sync修饰符
<!--comp: 对其赋新值-->
<script>
Vue.compontent('text-document',{
...
this.$emit('update:title', newTitle)
...
})
</script>
<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event"></text-document>
<text-document v-bind:title.sync="doc.title"></text-document>
注意带有
.sync
修饰符的v-bind
不能和表达式一起使用 (例如v-bind:title.sync=”doc.title + ‘!’”
是无效的)。注意带有.sync
修饰符的v-bind
不能和表达式一起使用 (例如v-bind:title.sync=”doc.title + ‘!’”
是无效的)。
将
v-bind.sync
用在一个字面量的对象上,例如v-bind.sync=”{ title: doc.title }”
,是无法正常工作的
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix