0 组件
组件是可复用的 Vue 实例,且带有一个名字.下面就是一个典型的全局组件例子,组件的名字是 <button-counter>
。
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
组件的详细官方文档见-组件基础
1 全局组件
1-1 创建全局组件
Vue.component("todo-item",{
//组件的html模版,下方的li一看就是要放ul循环生成li的
templete:"<li>Todo LiST</li>"
})
1-2 使用组件:
上面定义了全局组件,而组件是有名字的,所以在html中,我们和普通标记一样,只是标记的名字,得换成我们自己定义的名字
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<todo-item v-for="item in list"></todo-item>
</ul>
1-3 向子组件传递数据
上面组件已经可以使用,但是发现没有我们在template中使用的都是固定的静态数据,并没有向其传递动态改变的数据!!!
问题是如果你不能向这个组件传递某一我们想展示的数据的话,它是没有办法使用的。这也正是 prop 的由来.
Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个 property。
为了给ul->li组件传递一个值,我们可以用一个 props
选项将其包含在该组件可接受的 prop 列表中:
1-3-1 修改组件,利用props传值
其中props中,后面的item就是要绑定的值(要跟下文html使用的v-bind联系使用)
template中{{item}},就是上述props中刚刚定义的绑定值itemContent;
Vue.component('blog-post', {
props: ['item'],
template: '<h3>{{ item}}</h3>'
})
1-3-2 在html组件中通过v-bind绑定组件定义的props值
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<todo-item v-bind:item="item" v-for="item in list"></todo-item>
</ul>
v-bind:item="item" v-for="item in list" ----第一个item是作为v-bind绑定值名,这个是要和上面的props中的一致的,后面的item则是后面v-for中的item值传递过去的,通过这个操作for:item->v-bind:item->这个值就传递到了vue实例的props中了.
v-bind:动态地绑定一个或多个 attribute,或一个组件 prop 到表达式。v-bind
Todo List实例代码
<!DOCTYPE html>
<html>
<head>
<title>TODO LIST</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/>
<input v-on:click="handleBtn" type="button" value="提交">
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<todo-item v-bind:item="item" v-for="item in list"></todo-item>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
Vue.component("todo-item",{
//props绑定组件传值
props:["item"],
//组件的html模版,下方的li一看就是要放ul循环生成li的
template:"<li>{{item}}</li>"
});
var app = new Vue({
el:"#app",
data:{
list:["第一课的内容","第二课的内容"]
,inputValue:''
},
// 响应事件要定义在vue的methods方法中
methods:{
handleBtn: function(){
this.list.push(this.inputValue);// 获取当前实例-app,data下的inputValue值,通过this即可
this.inputValue = ''; // 点击后清空v-model绑定的输入框
}
}
})
</script>
2 局部组件
局部组件和全局组件的写法区别就是,全局组件直接通过Vue.componet()声明,而局部组件是通过声明成一个js对象,如var todoItem = {}的方式,然后将这个申明的对象注册到Vue实例中的components属性中,作为自定义组件的引入.代码实例如下:
<body>
<div id="app">
<input type="text" v-model="inputValue"/>
<input v-on:click="handleBtn" type="button" value="提交">
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<todo-item v-bind:item="item" v-for="item in list"></todo-item>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
// 局部组件
var TodoItemValue = {
props: ['item'],// 和全局组件一样,props中的属性值是html的v-bind中绑定的
template:"<li>{{item}}</li>"
}
var app = new Vue({
el:"#app",
// 注册局部组件
components:{
TodoItem:TodoItemValue // components第一个值TodoItem是html中使用的标签组件名,第二个TodoItemValue则是局部组件声明对象名
},
data:{
list:["第一课的内容","第二课的内容"]
,inputValue:''
},
// 响应事件要定义在vue的methods方法中
methods:{
handleBtn: function(){
this.list.push(this.inputValue);// 获取当前实例-app,data下的inputValue值,通过this即可
this.inputValue = ''; // 点击后清空v-model绑定的输入框
}
}
})
</script>
这三段代码得认真仔细看看,这是组件值相互绑定传值的写法.
额外,关注一下图中的组件名命名说明,即TodoItem会自动转成todo-item.
3 完整代码
<!DOCTYPE html>
<html>
<head>
<title>TODO LIST</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/>
<input v-on:click="handleBtn" type="button" value="提交">
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<todo-item v-bind:item="item" v-for="item in list"></todo-item>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
// 全局组件
// Vue.component("todo-item",{
// //props绑定组件传值
// props:["item"],
// //组件的html模版,下方的li一看就是要放ul循环生成li的
// template:"<li>{{item}}</li>"
// });
// 局部组件
var TodoItemValue = {
props: ['item'],// 和全局组件一样,props中的属性值是html的v-bind中绑定的
template:"<li>{{item}}</li>"
}
var app = new Vue({
el:"#app",
// 注册局部组件
components:{
TodoItem:TodoItemValue // components第一个值TodoItem是html中使用的标签组件名,第二个TodoItemValue则是局部组件声明对象名
},
data:{
list:["第一课的内容","第二课的内容"]
,inputValue:''
},
// 响应事件要定义在vue的methods方法中
methods:{
handleBtn: function(){
this.list.push(this.inputValue);// 获取当前实例-app,data下的inputValue值,通过this即可
this.inputValue = ''; // 点击后清空v-model绑定的输入框
}
}
})
</script>