Vue从TodoList中学父子组件通信

简单的 TodoList

公司主营业务:网站制作、做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出邹城免费做网站回馈大家。

实现一个简单的 todolist,当我输入内容后,点击提交自动添加在下面,如下图所示:

Vue从TodoList中学父子组件通信

用代码实现这个效果:

  • {{item}}

当我在input框中输入内容后,点击提交,Vue 会自动将内容渲染在页面中,具体是怎么实现的呢?

我们都知道 Vue 是一个 MVVM 框架,让开发者专注于数据变更,无需关注 Dom,所以它的核心是VM层,也就是说渲染这部分不需要开发者考虑了。

循环v-for

v-for指令是 Vue 提供的api,可以实现循环添加

v-for="item in list"

将list中数据循环添加到页面中,值为item

所以当我点击提交时,只需要获取到输入框中的值,然后push到list中,我们看到的效果就是一个个添加。

绑定v-model

如何获取输入框中的值变成了一个问题,没用 Vue 之前,获取输入框中的值,非常简单,用$(input).val()就能轻松获取。

用了 Vue 之后,不应该操作 Dom 来获取值,Vue 肯定也考虑到这点了,提供了一个api

v-model="inputVal"

第一次用这个指令时,踩了一个坑,我在inputVal两边加上了双括号,从而导致页面中没任何反应,这边是不需要加双括号的。渲染模版时才需要用 Vue 提供的模版字符串

一个简单的 TodoList 就已经实现了。

组件化

每个li其实都是一个组件,我们可以用组件的形式来开发

全局组件:

用 Vue 提供的component创建组件可创建一个全局组件,组件的名字TodoList在模版中需要用todo-list来实现,大小变小写,中间用-连接。

局部组件:

  
  

使用局部组件,声明一个对象,内容和全局组件一样,不过需要再 Vue 中注册一下,使用component属性注册

component:{
  TodoList
}

用了组件后之后,就会涉及到数据通信,一般有两种:

  • 组件中如何才能拿到外面的数据
  • 组件中数据变化,外面如何知道

父 -> 子组件通信

现在已经用组件实现上面的功能了,但是组件中还没有数据,如果将我输入框中的数据传递给子组件。

子组件中获取数据,还是用v-for循环,用v-bind绑定需要的数据,组件中用props获取绑定的数据



let TodoList = {
  props:['content'],
  template: `
  • {{content}}
  • `, // content 就是相关数据 }

    父 -> 子组件通信实现了往组件里面添加数据,如果子组件中要删除一项,应该怎么操作呢?

    子 -> 父组件通信

    子 -> 父组件通信,Vue 提供了一个$emit()方法,组件中使用v-on指令可绑定事件

    组件中绑定事件,第一个参数是事件名,第二个参数是要传递给父元素的参数

    template: '
  • {{item}}
  • '' //绑定事件为 click,需要执行的函数是 handleItemClick methods: { //写在组件里面 handleItemClick() { this.$emit('delete', this.index) } }

    父元素监听事件

    
    
    handleItemDelete(index) {          //写在 Vue 实例中
      this.list.splice(index, 1)
    }
    
    

    通过父子组件之间的通信,就可以实现 父->子 子->父 之间数据传输问题。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


    网页名称:Vue从TodoList中学父子组件通信
    文章网址:http://scyanting.com/article/ieccod.html

    其他资讯