Vue从TodoList中学父子组件通信

简单的 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,需要执行的函数是 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)
}

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

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

(0)

相关推荐

  • 使用Vue父子组件通信实现todolist的功能示例代码

    先上代码 <body> <div id="root"> <div> <input v-model="inputValue" /> <button @click="handleClick">submit</button> </div> <ul> <todolist v-for="(item,index) of list" :ke

  • vue组件编写之todolist组件实例详解

    我们在topNav这个页面上插入一个todolist子组件 我不知道怎么回事,这里的markdown的代码总是串行..所以代码看得不舒服,见谅啊,我最后会放github的源代码地址. 1. 父组件topNav中注册子组件,引入子组件 <template> <div> <p>下面这一行就是定义的组件名称</p> <todo-list></todo-list> <router-view></router-view>

  • vue2的todolist入门小项目的详细解析

    看完vue2的官方文档后,找个入门项目巩固下知识点,简单的todolsit是个不错的选择. 项目用到了vue.js vue.cli webpack ES6 node环境,完成项目后会对这些技术栈有了些了解. 准备开发环境 $ npm install -g vue-cli $ vue init ,比如 vue init webpack todolist $ cd todolist $ npm install $ npm run dev 安装谷歌插件vue.js devtools 下载vue.js的

  • 利用vue写todolist单页应用

    网上有很多关于vue的todolist小程序.大多是利用vue-cli脚手架工具开发的,这个官网的文档也不支持新手从单文件开始学习.所以用大家熟悉的开发方式写了这个todolist,希望和大家一起学习. 1.vue是啥? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.简单说是一个模板引擎,做过后端的应该很清楚,以前靠服务器端渲染的dom,放在浏览器端端渲染,vue拿到数据渲染成dom.当然vue不仅仅是用来干这个的,数据驱动,数据双向绑定,赋予了用户很

  • Vue.js实现简单ToDoList 前期准备(一)

    一.前言 最近开始学习轻量级的mvvm框架Vue.js.就中文文档来说,算是很齐全了.之前本来在学习1.0版本,某日突然打开官网发现已更新为2.0.便把之后的都改为了2.0的语法.ps:如果恰好你是Vue的初学者的话,慕课网上有一个视频倒是可以去学习参考(我就是参考那个写了个ToDoList的小玩具,在这记录一下学习过程). 二.开篇 mvvm框架是前端现在比较热门的话题,去拉勾网上转一圈,基本70%都有要求.所以不说虚的,只是为了多挣点钱,咱们也该跟上时代的步伐不是.推荐一篇博文'http:/

  • Vue中父子组件通讯之todolist组件功能开发

    一.todolist功能开发 <div id="root"> <div> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> </div> <ul> <li v-for="(item, index ) of list

  • 使用Vue完成一个简单的todolist的方法

    看了两天的Vue,还是上手写一个简单的todolist更实用(文末有彩蛋). 一.使用vue-cli脚手架快速搭建一个框架 利用vue-cli来自动生成我们项目的前端目录及文件,方法: npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev 这样我们的一个基于webpack的vue项目目录就可以快速构建好了. 目录如下: 二.完成一个简单的todolist 接下来就看一下we

  • vue实现留言板todolist功能

    通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet&quo

  • 详解Vue的computed(计算属性)使用实例之TodoList

    最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组件的方法,不同的是vue采用的与html绑定事件. 给个例子 /*html*/ <input type="button" value="点击" v-on:click='handlClick' id="app"> /*js*/ var ap

  • vue实现ToDoList简单实例

    一.需求与准备 1.准备 使用bootstrap实现页面的基础样式(依赖jquery),使用vue实现功能需要 2.功能需求 1).表单实现输入任务清单后加入到展示项中 2).点击删除按钮弹出警告框询问是否删除(bootstarp模态框插件) 3).确定删除时,删除对应项(单项删除,全部删除) 4).任务列表为空时,显示"数据为空" v-show 二.实例 1.静态页面 demo使用bootstrap来快速搭建页面 1).表单组件: .form, form-group, form-co

随机推荐