关于vue.js:Vue3组件

33次阅读

共计 1476 个字符,预计需要花费 4 分钟才能阅读完成。

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

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

正文完
 0