关于vue.js: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: `      <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>'})

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