Vue从TodoList中学父子组件通信

作者:UCCs 时间:2024-05-29 22:22:20 

简单的 TodoList

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

Vue从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,需要执行的函数是 handleItemClick

methods: {                 //写在组件里面
 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)
}

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

来源:https://segmentfault.com/a/1190000018101014

标签:Vue,TodoList,父子组件,通信
0
投稿

猜你喜欢

  • 利用python打开摄像头及颜色检测方法

    2022-08-06 13:11:29
  • 如何判断URL格式是否符合规范?

    2010-01-12 20:14:00
  • python实现名片管理系统

    2021-04-02 22:21:40
  • MySQL远程访问设置终极方法

    2024-01-19 02:31:43
  • IDEA使用properties配置文件进行mysql数据库连接的教程图解

    2024-01-22 13:45:08
  • Python 使用 docopt 解析json参数文件过程讲解

    2021-06-30 21:44:00
  • 8种Python异常检测算法总结

    2021-02-26 20:30:35
  • PyQt实现界面翻转切换效果

    2023-12-27 04:49:46
  • django settings.py 配置文件及介绍

    2022-01-17 12:52:44
  • Django中的文件的上传的几种方式

    2023-08-26 22:48:51
  • JavaScript基于Ajax实现不刷新在网页上动态显示文件内容

    2024-05-06 10:08:38
  • Oracle 添加用户并赋权,修改密码,解锁,删除用户的方法

    2009-10-14 11:37:00
  • webstorm中配置Eslint的两种方式及差异比较详解

    2024-04-17 10:38:22
  • 在WordPress的后台中添加顶级菜单和子菜单的函数详解

    2024-05-13 09:25:12
  • 如何使数据库的ID字段自动加1?

    2010-06-03 10:47:00
  • PDO::quote讲解

    2023-06-03 21:14:37
  • asp不用DSN也能连接EXCEL吗?

    2009-10-29 12:25:00
  • python 如何对Series中的每一个数据做运算

    2023-11-19 23:33:07
  • Python实现深度遍历和广度遍历的方法

    2023-10-13 20:41:13
  • python 基于dlib库的人脸检测的实现

    2022-08-23 22:59:07
  • asp之家 网络编程 m.aspxhome.com