Vue 系列之 组件
一个简单的 TodoList
<body>
<div id="root">
<div>
<input type="text" v-model="todo">
<button @click="handleSubmit">Submit</button>
<ul>
<li v-for="(item, index) in items" :key="index">{{item}}</li>
</ul>
</div>
</div>
<script>
new Vue({
el: "#root",
data: {
todo: "hello",
items: []
},
methods: {
handleSubmit: function () {
this.items.push(this.todo)
this.todo = ""
}
}
})
</script>
</body>
往数组里面添加元素使用 push 方法，删除使用
组件
全局组件
<body>
<div id="root">
<input type="text" v-model="todo">
<button @click="handleSubmit">Submit</button>
<ul>
<todo-item v-for="(item, index) in items" :key="index" :content="item"></todo-item>
</ul>
</div>
<script>
Vue.component("todo-item", {
props: ["content"],
template: "<li>{{content}}</li>"
})
new Vue({
el: "#root",
data: {
todo: "",
items: []
},
methods: {
handleSubmit: function () {
this.items.push(this.todo)
this.todo = ""
}
}
})
</script>
</body>
局部组件
<body>
<div id="root">
<input type="text" v-model="todo">
<button @click="handleSubmit">Submit</button>
<ul>
<todo-item v-for="(item, index) in items" :key="index" :content="item"></todo-item>
</ul>
</div>
<script>
var todoItem = {
props: ["content"],
template: "<li>{{content}}</li>"
}
new Vue({
el: "#root",
data: {
todo: "",
items: []
},
components: {
"todo-item": todoItem,
},
methods: {
handleSubmit: function () {
this.items.push(this.todo)
this.todo = ""
}
}
})
</script>
</body>
组件与实例的关系
<body>
<div id="root">
<input type="text" v-model="todo">
<button @click="handleSubmit">Submit</button>
<ul>
<todo-item v-for="(item, index) in items" :key="index" :content="item"></todo-item>
</ul>
</div>
<script>
var todoItem = {
props: ["content"],
template: "<li @click='handleClick'>{{content}}</li>",
methods: {
handleClick: function () {
alert(1111)
}
}
}
new Vue({
el: "#root",
data: {
todo: "",
items: []
},
components: {
"todo-item": todoItem,
},
methods: {
handleSubmit: function () {
this.items.push(this.todo)
this.todo = ""
}
}
})
</script>
</body>
Vue程序 是由众多的 vue实例 构建而成的。对于根实例，对应的模板是挂载点下所有的 Dom 节点；
组件的 data 必须是一个函数
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
data: function () {
return {
count: 0
}
}
事件的发布与订阅
<body>
<div id="root">
<input type="text" v-model="todo">
<button @click="handleSubmit">Submit</button>
<ul>
<!--订阅事件-->
<todo-item @delete="handledelete" v-for="(item, index) in items" :key="index" :content="item" :index="index"></todo-item>
</ul>
</div>
<script>
var todoItem = {
props: ["content", "index"],
template: "<li @click='handleClick'>{{index}} - {{content}}</li>",
methods: {
handleClick: function () {
//发布事件
this.$emit('delete', this.index)
}
}
}
new Vue({
el: "#root",
data: {
todo: "",
items: []
},
components: {
"todo-item": todoItem,
},
methods: {
handleSubmit: function () {
this.items.push(this.todo)
this.todo = ""
},
//实现事件
handledelete: function (index) {
this.items.splice(index)
}
}
})
</script>
</body>
通过 发布-订阅 模式进行组件间的数据传递和事件通知；
