Vue3组件

92 阅读2分钟

上一篇文章小编用Vue的语法编写了一个简单的todoList,实现的逻辑比较简单,但是在实际项目中,会涉及到一些比较复杂的逻辑,比如在item中添加各种各样的标签,再加上甲方爸爸提出各种各样的需求,最后可能把我们搞到崩溃。所以引入了在组件化的概念。在组件化之前,小编先跟大家补充一些基础知识。大家还可以关注我的微信公众号,蜗牛全栈。

一、数据绑定和差值表达式

上一篇文章小编要实现的效果是这样的

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

Vue.createApp({    
    data() {        
        return {            
            list: ['item1', 'item2', 'item3', 'item4'],            
            inputVal: ""        
        }    
    },    
    methods: {        
        handleAddItem() {            
            this.list.push(this.inputVal)            
            this.inputVal = ''        
        }    
    },    
    template: `<div>          
                <input v-model="inputVal" />          
                // v-bind可以实现将data中的数据绑定在指定属性上,包括html原生标签属性和后续组件传值   
                // v-bind:title="inputVal"可以简写成:title="inputVal"          
                <button v-bind:title="inputVal" v-on:click="handleAddItem">
                    增加{{ inputVal }}
                </button>          
                <ul>
                // {{}} 叫做差值表达式,可以实现与data中的数据动态绑定,              
                // 可以实现【把文本框的内容实时的显示在按钮里面】             
                    <li v-for="(item,index) of list">{{item}}</li>           
                </ul>      
            </div>`
    }).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: `<div>
                    <input v-model="inputVal" />    
                    <button v-bind:title="inputVal" v-on:click="handleAddItem">
                        增加{{ inputVal }}
                    </button>    
                    <ul>        
                        // 通过v-bind:content="item"将父页面的值通过自定义属性content传递到子组件中       
                        <todo-item  v-for="item of list" v-bind:content="item" />    
                    </ul></div>`}).mount('#root')
app.component('todo-item',{  // 注册组件    
props:['content'], // 子组件接受父组件传递过来的值    
template: '<div>{{ content }}</div>'})

又是前端进步的一天,大家一起加油!