一个页面有很多部分组成,比如:轮播以及内容区域等等,如果我们把业务逻辑都写在一个页面的话,不利于维护,组件相当于页面的一个部分,一个页面可以切割为很多部分,这样可以提高代码的可维护性以及方便开发。
组件化思想修改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>
完。
微信小程序
互联网开发,终身学习者,欢迎您的关注!