正文
vue组件化的应用
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
前言：vue组件化的应用涉及到vue-cli的内容，所以在应用之前是需要安装node和vue-cli的，具体如何安装我就不一一赘述了。可能一会儿我心情好的时候，可以去整理一下。
1、应用的内容：在一个页面中，需要一个固定的内容，这个内容可以多次引用，那么就可以考虑把他分离出来，在下次需要的时候，实现引用就好。
比如：
<input type="text" v-model="content" >
<button @click = addList>添加</button>
<ul>
<li v-for="( item ) of todoList">{{item}
</li>
</ul>
通过输入框添加列表项，原本是这样的，但我可以考虑优化一下，把ul中的内容分离出去，再来引用它。作为一个简单的demo来学习。
2、父组件中给子组件命名，li-item
<input type="text" v-model="content" >
<button @click = addList>添加</button>
<ul>
<li-item v-for='( item ,index) of todoList' :key = "index" :index="index" :content = 'item' @delete="deleteitem">
</li-item>
</ul>
在组件中，必须有key值做索引，index值和content。
3、此时我们把分离的内容（子组件）写在一个新的叫LiItem的页面中。
<template>
<li @click="deleteItem"> {{content}}</li>
</template><script>
export default {
name: 'LiItem',
props: ['content', 'index'],
data () {
return {
item: 'item'
}
},
methods: {
deleteItem () {
this.$emit('delete', this.index)
}
}
}
</script><style scoped></style>
子组件name，方便引用。子组件的值需要传在props中作为记录。在父组件中有需要调用。
4、然后在父组件中引入子组件的内容。
import LiItem from '@/components/LiItem'
在components里面加入子组件的值。
components: {
'li-item': LiItem
}
5、此时就分离出来了，如果还子组件上面还有相应的点击函数，那么就需要在子组件中定义。比如上面的代码中，有一个删除函数，即删除添加的选项deleteItem，方法需要在methods中定义。
deleteItem () {this.$emit('delete', this.index)}
然后在父组件中引入并实现功能
@delete="deleteitem"
deleteitem(){this.todoList.splice(this.item, 1)}
总结：这只是一种分离的方式，还有更多独立的更优化的方法，后期我会好好去探讨总结。
