Vue的学习(六)
组件基础(大部分源自官网)
这里有一个Vue组件的示例:
- vue
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter',{
data:function(){
return{
count:0
}
},
template:'<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
组件是可复用的Vue实例,且带有一个名字:在这个例子中是<button-counter>
。我们可以在一个通过new Vue
创建的Vue根实例中,把这个组件作为自定义元素来使用:
- html
<div id="components-demo">
<button-counter></button-counter>
</div>
- vue
new Vue({el:'#components-demo'})
运行效果如下:
因为组件是可复用的Vue实例,所以它们与new Vue
接收相同的选项,例如data
,computed
,watch
,methods
以及生命周期钩子等。仅有的例外是像el
这样根实例特有的选项
组件的复用
你可以将组件进行任意次数的复用:
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
注意当点击按钮时,每个组件都会各自独立维护它的count
。因为你每用一次组件,就会有一个它的新实例被创建
运行效果如下:
-
data
必须是一个函数-
当我们定义这个
<button-counter>
组件时,你可能会发现它的data
并不是像这样直接提供一个对象:-
data:{ count:0 }
-
-
取而代之的是,一个组件的
data
选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:-
data:function(){ return{ count:0 } }
如果Vue没有这条规则,点击一个按钮就可能会像如下代码一样影响到其它所有实例:
-
-
组件的注册
有两种方式注册Vue组件:全局注册和局部注册,就好像JavaScript中全局变量和局部变量的区别,
前者可以用在其被注册之后的任何(通过new Vue
)新创建的Vue根实例,也包括其组件树中的所有子组件的模板中,
后者只能在注册他的Vue实例或者父组件中使用。如果在组件中使用组件,就形成了组件的嵌套,如果组件里嵌套的组件是自己,就形成组件的递归。
总之,组件由两部分构成,
一部分是需要自定义的tag-name,以下面为例,tagname是<my-component>
,
另一部分是options对象,里面包含了该组件的模板,方法,props,data等细节
全局注册:
Vue.component('my-component',{
// 选项
})
局部注册:
var options={template:....} //组件的选项对象
new Vue({
el:"#man",
components:{
'my-component',options
}
});
is的作用
将组件挂载到已存在(内置)元素内时,遇到某些元素,如<ul>
,<ol>
,<table>
,<select>
这些标签,他们不认自定义标签,这时便需要is来发挥作用了
<ul>
<my-component></my-component>
</ul>
如上面这样的代码,便是行不通的,需要变成下面这样子
<ul>
<li is="my-component"></li>
</ul>
当使用单文件组件时,就不需要这么做了,也就是说<ul>
中可以有组件了。
通过Prop向子组件传递数据
Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题,我们可以用一个
props
选项将其包含在该组件可接受的 prop 列表中:
Vue.component('blog-post',{
props:['title'],
template:'<h3>{{ title }}</h3>'
})
一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop。在上述模板中,你会发现我们能够在组件实例中访问这个值,就像访问
data
中的值一样。一个 prop 被注册之后,你就可以像这样把数据作为一个自定义 attribute 传递进来:
<blog-post title="咬定青山不放松"></blog-post>
可能你想要在data
里有一个博文的数组:
new Vue({
el:'#example',
data:{
posts:[
{id:1,title:'咬定青山不放松'},
{id:2,title:'立根原在破岩中'},
{id:3,title:'千磨万击还坚劲'},
{id:4,title:'任尔东南西北风'}
]
}
});
为每篇博文渲染一个组件:
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
></blog-post>
如上所示,你会发现我们可以使用 v-bind
来动态传递 prop。这在你一开始不清楚要渲染的具体内容,比如从一个 API 获取博文列表的时候,是非常有用的。
单个根元素
当构建一个 <blog-post>
组件时,你的模板最终会包含的东西远不止一个标题:
<!-- html -->
<h3>
{{title}}
</h3>
最最起码,你会包含这篇博文的正文:
<!-- html -->
<h3>{{title}}</h3>
<div v-html="content"></div>
然而如果你在模板中尝试这样写,Vue 会显示一个错误,并解释道 every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内,来修复这个问题,例如:
<!-- html -->
<div class="blog-post">
<h3>{{title}}</h3>
<div v-html="content"></div>
</div>
看起来当组件变得越来越复杂的时候,我们的博文不只需要标题和内容,还需要发布日期、评论等等。为每个相关的信息定义一个 prop 会变得很麻烦:
<!-- html -->
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
v-bind:content="post.content"
v-bind:publishedAt="post.publishedAt"
v-bind:comments="post.comments"
></blog-post>
所以是时候重构一下这个 <blog-post>
组件了,让它变成接受一个单独的 post
prop:
<!-- html -->
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
// vue
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
`
})
现在,不论何时为 post
对象添加一个新的 property,它都会自动地在 <blog-post>
内可用。
监听子组件事件
在我们开发 <blog-post>
组件时,它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个辅助功能来放大博文的字号,同时让页面的其它部分保持默认的字号。
在其父组件中,我们可以通过添加一个 postFontSize
数据 property 来支持这个功能:
// vue
new Vue({
el:'#blog-posts-events-demo',
data: {
posts: [
{ id: 1, title: '咬定青山不放松', content: "坚持" },
{ id: 2, title: '立根原在破岩中', content: "再坚持" },
{ id: 3, title: '千磨万击还坚劲', content: "继续坚持" },
{ id: 4, title: '任尔东南西北风', content: "决不放弃" }
],
postFontSize: 1,
enlarge:"" // 由于 Vue 不允许动态添加根级反应属性,我们必须通过提前声明所有根级活性数据属性(即使具有空值)来初始化 Vue 实例;
// 如果我们没有在数据选项中声明,Vue 将警告我们渲染功能正在尝试访问不存在的属性。
}
});
它可以在模板中用来控制所有博文的字号:
<!-- html -->
<div id="blog-posts-events-demo">
<div :style="{fontSize:postFontSize+'em'}">
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
</div>
</div>
现在我们在每篇博文正文之前添加一个按钮来放大字号:
// vue
Vue.component('blog-post',{
props:['post'],// 子组件利用props接收父组件的数据
template:`
<div class="blog-post">
<h3>{{post.title}}</h3>
<button>
Enlarge text
</button>
<div v-html="post.content"></div>
</div>
`
})
问题是这个按钮不会做任何事:
<!-- html -->
<button>
Enlarge text
</button>
当点击这个按钮时,我们需要告诉父级组件放大所有博文的文本。幸好 Vue 实例提供了一个自定义事件的系统来解决这个问题。父级组件可以像处理 native DOM 事件一样通过
v-on
监听子组件实例的任意事件:
<!-- html -->
<blog-post
...
v-on:enlarge="postFontSize += 0.1"
></blog-post>
同时子组件可以通过调用内建的 $emit
方法并传入事件名称来触发一个事件:
<!-- html -->
<button v-on:click="$emit('enlarge')">
Enlarge text
</button>
有了这个 v-on:enlarge="postFontSize += 0.1"
监听器,父级组件就会接收该事件并更新 postFontSize
的值。
运行效果如下:
使用事件抛出一个值
有的时候用一个事件来抛出一个特定的值是非常有用的。例如我们可能想让
<blog-post>
组件决定它的文本要放大多少。这时可以使用$emit
的第二个参数来提供这个值:
<!-- html -->
<button v-on:click="$emit('enlarge',0.1)">
Enlarge text
</button>
然后当在父级组件监听这个事件的时候,我们可以通过$event
访问到被抛出的这个值:
<!-- html -->
<blog-post
...
v-on:enlarge="postFontSize += $event"
></blog-post>
或者,如果这个事件处理函数是一个方法:
<!-- html -->
<blog-post
...
v-on:enlarge="onEnlargeText"
></blog-post>
那么这个值将会作为第一个参数传入这个方法:
// vue
methods:{
onEnlargeText:function(enlargeAmount){
this.postFontSize += enlargeAmount
}
}
在组件上使用v-model
自定义事件也可以用于创建支持v-model
的自定义输入组件。记住:
<!-- html -->
<input v-model="searchText">
等价于:
<!-- html -->
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
当用在组件上时,v-model
则会这样:
<!-- html -->
<custom-input
v-bind:value="searchText"
v-on:input="searchText = $event"
></custom-input>
为了让它正常工作,这个组件内的
<input>
必须:
- 将其
value
attribute绑定到一个名叫value
的prop上- 在其
input
事件被触发时,将新的值通过自定义的input
事件抛出
写成代码之后是这样的:
// vue
Vue.component('custom-input',{
props:['value'],
template:`<input v-bind:value="value" v-on:input="$emit('input',$event.target.value)">`
});
new Vue({
el:"#example",
data:{
searchText:""
}
});
现在v-model
就应该可以在这个组件上完美地工作起来了:
<!-- html -->
<div id="example">
<custom-input v-model="searchText"></custom-input>
{{searchText}}
</div>
运行效果如下:
通过插槽分发内容
参考代码:
<!-- html -->
<div id="example">
<alert-box>
Something bad happened
</alert-box>
</div>
// vue
Vue.component('alert-box',{
template:`
<div id="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
});
new Vue({
el:"#example"
});
如上所示,因为有着vue自定义的
slot
元素,我们只要在需要的地方加入插槽就行了——就这么简单!
动态组件
在不同的组件之间进行动态切换。
例如在一个多标签的界面里:
代码如下:
// css
* {
margin: 0;
padding: 0;
list-style: none;
}
#example{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.one {
padding: 6px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border: 1px solid #ccc;
cursor: pointer;
background: #f0f0f0;
margin-bottom: -1px;
margin-right: -1px;
}
.one:hover {
background: #e0e0e0;
}
.two {
background: #e0e0e0;
}
.three {
width:575px;
border: 1px solid #ccc;
padding: 10px;
}
<!-- html -->
<div id="example">
<button v-for="(item,index) in tabs" v-on:click="getItem(index)" class="one" :class="{two : index==isActive}">{{item}}</button>
<component v-bind:is="currentTabComponent" class="three"></component>
</div>
Vue.component('tab-name', { template: `<div>张裕</div>` });
Vue.component('tab-gender', { template: `<div>男</div>` });
Vue.component('tab-age', { template: `<div>21</div>` });
Vue.component('tab-target',{ template:`<div>Web前端开发工程师</div>`})
new Vue({
el: "#example",
data: {
currentTab: "Name",
tabs: ["Name", "Gender", "Age","Target"],
isActive:-1
},
methods:{
getItem(index){
this.currentTab = this.tabs[index];
this.isActive = index;
}
},
computed: { // Vue的computed属性可监听data属性中数据的变化
currentTabComponent: function () {
return 'tab-' + this.currentTab.toLowerCase();
}
}
});
上述的内容是通过Vue的<component>
元素加一个特殊的is
attribute实现的
<!-- html -->
<!-- 组件会在`currentTabComponent`改变时改变 -->
<component v-bind:is="currentTabComponent"></component>
在上述示例中,currentTabComponent
可以包括
- 已注册组件的名字,或
- 一个组件的选项对象
请留意,这个 attribute 可以用于常规 HTML 元素,但这些元素将被视为组件,这意味着所有的 attribute 都会作为 DOM attribute 被绑定。对于像 value
这样的 property,若想让其如预期般工作,你需要使用 .prop
修饰器。
解析DOM模板时的注意事项
有些 HTML 元素,诸如
<ul>
、<ol>
、<table>
和<select>
,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如<li>
、<tr>
和<option>
,只能出现在其它某些特定的元素内部。这会导致我们使用这些有约束条件的元素时遇到一些问题。例如:
<!-- html -->
<table>
<blog-post-row></blog-post-row>
</table>
这个自定义组件
<blog-post-row>
会被作为无效的内容提升到外部,并导致最终渲染结果出错。幸好这个特殊的is
attribute 给了我们一个变通的办法:
<!-- html -->
<table>
<tr is="blog-post-row"></tr>
</table>
需要注意的是如果我们从以下来源使用模板的话,这条限制是不存在 的:
- 字符串 (例如:
template: '...'
) - 单文件组件 (
.vue
) <script type="text/x-template">