一个页面有很多部分组成，比如：轮播以及内容区域等等，如果我们把业务逻辑都写在一个页面的话，不利于维护，组件相当于页面的一个部分，一个页面可以切割为很多部分，这样可以提高代码的可维护性以及方便开发。
组件化思想修改todolist
如上图，输入任何内容的时候，我们都会把内容放在下面的红框里，每一个列表项都是页面的一部分，既然是一部分我们就可以把它拆分为一个组件。
源代码
- <div id="app">
- <input type="text" v-model="inputValue"/>
- <button v-on:click="btnClick">提交</button>
- <ul>
- <li v-for="item in List">{{item}}</li>
- </ul>
- </div>
- ipt>
- var app = new Vue({
- el:'#app',
- data: {
- List: [],
- inputValue: ''
- },
- methods: {
- btnClick: function () {
- this.List.push(this.inputValue)
- this.inputValue = ''
- }
- }
- })
- ript>
当前列表项是通过循环li标签来显示的，现在我想把li标签的内容整体变为一个组件，要怎么做呢？
- 在script标签中调用一个
component方法，component是vue提供给我们创建全局组件的方法，具体实例如下：
- Vue.component("TodoList",{ //定义全局组件，其中名字可简写为todo-list
- props:['content'], //从父组件接收内容
- template:"<li>{{content}}</li>" //组件模板（要用插值表达式调用）
- 使用todo-list组件，具体实例如下：
- <ul>
- <todo-item v-bind:content="item" v-for="item in List"></todo-item>
- </ul>
循环List时，把List的每一项值赋值给item，然后item通过v-bind的语法通过content这个变量传给todo-item子组件。
最后代码
- <div id="app">
- <input type="text" v-model="inputValue"/>
- <button v-on:click="btnClick">提交</button>
- <ul>
- <todo-item v-bind:content="item" v-for="item in List"></todo-item>
- </ul>
- </div>
- <script>
- Vue.component("TodoItem",{
- props:['content'],
- template:"<li>{{content}}</li>"
- })
- var app = new Vue({
- el:'#app',
- data: {
- List: [],
- inputValue: ''
- },
- methods: {
- btnClick: function () {
- this.List.push(this.inputValue)
- this.inputValue = ''
- }
- }
- })
- </script>
完。
微信小程序
互联网开发，终身学习者，欢迎您的关注！
