在上一篇文章中，我用Vue语法写了一个简单的todoList。实现的逻辑比较简单，但是在实际项目中，会涉及到一些比较复杂的逻辑，比如给item添加各种item。各种标签，再加上甲方爸爸的各种需求，最终可能会把我们击垮。于是引入了组件化的概念。在组件化之前，小编先跟大家补充一些基础知识。1.数据绑定和差异表达上篇文章小编想要达到的效果是这样的。这时候可能会有这样的需求。比如我想把在文本框中输入的内容作为按钮标签的标题，或者我想在按钮中实时显示文本框的内容。这时候，我们需要修改代码为这样：,methods:{handleAddItem(){this.list.push(this.inputVal)this.inputVal=''}},template:`
//v-bind可以实现data中的数据绑定指定属性，包括html原生标签属性和后续组件传值//v-bind:title="inputVal"可以简写为：title="inputVal"
Add{{inputVal}}//{{}}调用差异表达式，可以实现与数据中数据的动态绑定，//[实时显示按钮中文本框的内容]{{item}}
`}).mount('#root')接下来我们可能不仅要给ul加上li，还要在中间加上各种标签，比如span,div……这时候就需要把组件引入到我的意见，日概念和组件可以理解为一个iframe，我们不关心iframe里面的东西。但是组件相对于iframe的优势在于它们可以相互通信并传输数据。constapp=Vue.createApp({//定义Vue实例data(){return{list:['item1','item2','item3','item4'],inputVal:""}},methods:{handleAddItem(){this.list.push(this.inputVal)this.inputVal=''}},模板：`
Add{{inputVal}}//通过v-bind:content="item"通过自定义属性content将父页面的值传递给子组件"
`}).mount('#root')app.component('todo-item',{//注册组件props:['content'],//子组件接受父组件传过来的值template:'
{{content}}
'})isfront-endprogress总有一天，让我们一起加油吧！也可以扫描二维码，关注我微信公众号，蜗牛全栈
