对上一个例子中的todolist，进行组件的拆分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件拆分</title> <script src="vue.js"></script> </head> <body> <div id="app"> <div> <input type="text" v-model="inputValue"> <button @click="putList">提交</button> </div> <ul> <todo-item v-for="(ls,index) in list" :key="index" :content="ls" > <!--在标签中定义了content属性来传递参数给模板组件,在组件中通过props定义[‘content‘]来接受属性--> </todo-item> </ul> </div> <script> //1.定义全局组件 /* * Vue.component( id, [definition] ) * */ Vue.component(‘todo-item‘, { props:[‘content‘],//props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。 template: ‘<li>{{content}}</li>‘ }); //2.局部组件,在vue实例中声明components来注册指定局部组件 // var TodoItem = { // template: ‘<li>item</li>‘ // }; new Vue({ el: "#app", // components:{ // ‘todo-item‘: TodoItem // }, data: {//数据项 inputValue: "", list: [] }, methods: { putList: function () { this.list.push(this.inputValue); this.inputValue = ""; } } }); </script> </body> </html>
原文：https://www.cnblogs.com/soul-wonder/p/9319357.html