Vue从TodoList中学父子组件通信

2019-11-19 12:10:21

字体：大中小

来源：转载

供稿：网友

简单的 TodoList

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

用代码实现这个效果：

<div id="app">  <input type="text" v-model="inputVal">  <button v-on:click="clickBtn">提交</button>  <ul>    <li v-for="item in list">{{item}}</li>  </ul></div><script>  let vm = new Vue({    el:'#app',    data:{      list:[],      inputVal:''    },    methods:{      clickBtn(){        this.list.push(this.inputVal)        inputVal = ''      }    }  })</script>

当我在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其实都是一个组件，我们可以用组件的形式来开发

全局组件：

<div id="app">  <input type="text" v-model="inputVal">  <button v-on:click="clickBtn">提交</button>  <ul>    <todo-list v-for="item in list"          v-bind:content="index"    ></todo-list>  </ul></div><script>  Vue.component('TodoLsit',{    props:['content'],    template:`<li>{{content}}</li>`,  })  let vm = new Vue({    el: '#app',    data: {      list: [],      inputVal: ''    },    methods: {      clickBtn() {        this.list.push(this.inputVal)        this.inputVal = ''      }    }  })</script>

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

局部组件：

  <button v-on:click="clickBtn">提交</button>  <ul>    <todo-list v-for="item in list"         v-bind:content="item"    ></todo-list>  </ul></div><script>  let TodoList = {    props:['content'],    template: `<li>{{content}}</li>`,  }  let vm = new Vue({    el: '#app',    data: {      list: [],      inputVal: ''    },    component:{   //注册组件     TodoList     },    methods: {      clickBtn() {        this.list.push(this.inputVal)        this.inputVal = ''      }    }  })</script>

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

component:{  TodoList}

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

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

父 -> 子组件通信

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

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

<todo-list v-for="(item,index) in list"      v-bind:content="item"      v-bind:index="index"      v-on:delete="handleItemDelete"></todo-list>let TodoList = {  props:['content'],  template: `<li>{{content}}</li>`,      // content 就是相关数据}

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

子 -> 父组件通信

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

<div id="app">  <input type="text" v-model="inputVal">  <button v-on:click="clickBtn">提交</button>  <ul>    <todo-list v-for="(item,index) in list"         v-bind:item="item"         v-bind:index="index"         v-on:delete="handleItemDelete"    ></todo-list>  </ul></div><script>  Vue.component('TodoList',{   props:['item', 'index'],   template: `<li v-on:click="handleItemClick">{{item}}</li>`,   methods: {     handleItemClick() {       this.$emit('delete', this.index)     }   }  })  let vm = new Vue({    el: '#app',    data: {      list: [],      inputVal: ''    },    methods: {      clickBtn() {        this.list.push(this.inputVal)        this.inputVal = ''      },      handleItemDelete(index) {        this.list.splice(index, 1)      }    }  })</script>

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

template: '<li v-on:click="handleItemClick">{{item}}</li>'' //绑定事件为 click，需要执行的函数是 handleItemClickmethods: {                 //写在组件里面  handleItemClick() {    this.$emit('delete', this.index)   }}

父元素监听事件

<todo-list v-for="(item,index) in list"      v-bind:item="item"      v-bind:index="index"      v-on:delete="handleItemDelete"  //监听 delete 事件， 执行函数是 handleItemDelete></todo-list>handleItemDelete(index) {          //写在 Vue 实例中  this.list.splice(index, 1)}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：ES6 对象的新功能与解构赋值介绍

下一篇：深入理解nodejs搭建静态服务器(实现命令行)