Vue从TodoList中学父子组件通信

网络编程 2025/1/4 佚名

3 1 2

快活林资源网 Design By www.csstdc.com

简单的 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)
}

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

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

Vue,TodoList,父子组件通信,Vue,父子组件通信

快活林资源网 Design By www.csstdc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

快活林资源网 Design By www.csstdc.com

评论“Vue从TodoList中学父子组件通信”

暂无评论...

www.csstdc.com 快活林资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

Vue从TodoList中学父子组件通信

ES6 对象的新功能与解构赋值介绍

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

评论“Vue从TodoList中学父子组件通信”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

Vue从TodoList中学父子组件通信

ES6 对象的新功能与解构赋值介绍

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

评论“Vue从TodoList中学父子组件通信”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存