乐趣区

关于vue.js:Vue3组件

jiezi

上一篇文章小编用 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>'
})

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

退出移动版