Vue3组件

Posted 2021-08-27 飞鹰3995

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

 

又是前端进步的一天，大家一起加油！

大家还可以扫描二维码，关注我的微信公众号，蜗牛全栈