Vue3组件

上一篇文章小编用Vue的语法编写了一个简单的todoList，实现的逻辑比较简单，但是在实际项目中，会涉及到一些比较复杂的逻辑，比如在item中添加各种各样的标签，再加上甲方爸爸提出各种各样的需求，最后可能把我们搞到崩溃。所以引入了在组件化的概念。在组件化之前，小编先跟大家补充一些基础知识。
一、数据绑定和差值表达式
上一篇文章小编要实现的效果是这样的

这个时候，可能有这样的需求，比如我想将文本框内输入的内容作为button标签的title，或者想把文本框的内容实时的显示在按钮里面。这时候，我们需要将代码修改成这样：

Vue.createApp({
    data() {
        return {
            list: ['item1', 'item2', 'item3', 'item4'],
            inputVal: ""
        }
    },
    methods: {
        handleAddItem() {
            this.list.push(this.inputVal)
            this.inputVal = ''
        }
    },
    template: `
      

          
          // v-bind可以实现将data中的数据绑定在指定属性上，包括html原生标签属性和后续组件传值
          // v-bind:title="inputVal"可以简写成:title="inputVal"
          增加{{ inputVal }}
          

              // {{}} 叫做差值表达式，可以实现与data中的数据动态绑定，
              // 可以实现【把文本框的内容实时的显示在按钮里面】
              
{{item}}
 
          
      
      `
}).mount('#root')

接下来，我们可能不仅仅要在ul中添加li，可能中间还要添加各种各样的标签，比如span、div...这个时候，我们需要引入组件的概念，组件在小编看来，可以理解成一个iframe，至于iframe里面的东西我们并不关心。但是组件比iframe好的地方是可以相互通信和数据传输。

const app = Vue.createApp({ // 定义Vue实例
    data() {
        return {
            list: ['item1', 'item2', 'item3', 'item4'],
            inputVal: ""
        }
    },
    methods: {
        handleAddItem() {
            this.list.push(this.inputVal)
            this.inputVal = ''
        }
    },
    template: `

    
    增加{{ inputVal }}
    

        // 通过v-bind:content="item"将父页面的值通过自定义属性content传递到子组件中
        
    

`
}).mount('#root')
app.component('todo-item',{  // 注册组件
    props:['content'], // 子组件接受父组件传递过来的值
    template: '
{{ content }}
'
})

又是前端进步的一天，大家一起加油！
大家还可以扫描二维码，关注我的微信公众号，蜗牛全栈