Vue组件
定义局部组件:
var TodoItem = {
props:['content'], //接收传进来的值,下面例子没有传值,所以没有写
template: '组件内容'
}
局部组件调用，需要在vue的实例里面添加一个components对这个局部组件进行一**册：如下
定义全局组件:
Vue.component('组件名',{
props:['content'],
template: '组件内容'
})
通过 ：content="item" 传入item
组件里面接收传入的值 props:['content']
每一个Vue组件，都是一个Vue实例，Vue实例有的功能，Vue组件都同样拥有也可以定义 methods:{ } 这些属性，反过来，每一个实例也都是一个组建，如果一个vue实例里面没有定义template，那么这个实例会把它对应的挂载点下(el:"#id")的所有内容当作模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>Vuetest</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" v-model="text"> <input type="button" value="添加" @click="add">
<ul>
<todo-item
v-for="(item,index) in list"
:key="index"
:content="item"
:index="index"
@delete="del"
></todo-item>
<!-- @delete="del" 监听子组件的delete事件-->
</ul>
</div>
<script>
Vue.component("todo-item",{
props: ['content',"index"],
template:"<li @click='handcilck'>{{content}}</li>",
methods:{
handcilck:function(){
this.$emit('delete',this.index)//向外触发一个delete事件
}
}
})
new Vue({
el:"#root",
data:{
text:"",
list:[]
},
methods:{
add:function(){
this.list.push(this.text);
this.text = "";
},
del:function(index){
alert(index);
}
}
});
</script>
</body>
</html>
以上是 Vue组件 的全部内容， 来源链接： utcz.com/z/375713.html
