父子组件间传值

最新推荐文章于 2024-07-23 11:32:13 发布

weixin_30362233

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量49

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/judyh/p/9979482.html

版权

此案例实现的功能是，一个简单待办事项的功能，可以添加和删除事项。主要为了表述父子组件间的传值方式。

父组件向子组件传值：使用props传值，单向数据流
子组件向父组件传值：通过Events触发

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
  <script type="text/javascript" src="./vue.js"></script></head><body>
  <div id="app">
    <div>
      <input v-model="itemName">
      <button @click="handelSubmit">添加</button>
    </div>
    <ul>
      <todo-item v-for="(item,index) in list"
      :key="index"
      :content= "item"
      :index="index"
      @delete= "ParentHandleDelete"></todo-item>
      </ul>
  </div>
  <script type="text/javascript">
    Vue.component('todo-item',{
      props: ['content','index'],
      template: ' <li>{{content}}<button @click="HandelDelete">删除</button></li>',
      methods: {
        HandelDelete: function (){    
this.$emit('delete',this.index)
        }
      }
    })  
new Vue ({
      el: "#app",
      data: {
        itemName: '',
        list: []
      },
      methods: {
        handelSubmit: function(){     
this.list.push(this.itemName);     
this.itemName = '';
        },
        ParentHandleDelete: function(index){     
this.list.splice(index,1);
        }
      }
    }) 
  </script>
</body>
</html>

下面解释一下上述代码，父组件里有一个列表渲染

<todo-item v-for="(item,index) in list"
      :key="index"
      :content= "item"
      :index="index"
      @delete= "ParentHandleDelete"></todo-item>

绑定了如下属性：

key：为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性，这是vue要求的，我们给它index的值。
content：待办事项的内容，我们绑定item
index：作为待办事项的索引，删除时需要传给子组件，这样就可以知道删除了哪个待事项
delete：监听事项，监听子组件触发的删除事件，下面还会说明

子组件todo-item的内容为，

<li>{{content}}<button @click="HandelDelete">删除</button></li>

子组件显示待办项目的内容及一个删除按钮。

父组件向子组件传值：父组件中待办项(item)的内容绑定在属性content上(:content= "item")，content通过props传递至子组件，因此props对应的数组里需要有'content'，子组件才能在li中接收到content的内容。在此例中我们从父组件传了两个值到子组件，分别是conte n和index，index是从父组件传过来用于在删除时指定删除的位置的。

子组件向父组件传值：删除事件(HandelDelete)是在子组里触发的，事件在子组件上触发后父组件并不能知道，子组件通过调用 this.$emit('delete',this.index) 这行代码向外触发delete事件，并传递了index这个参数，父组件通过@delete="ParentHandleDelete"监听子组件的删除事件，一旦监听到以后触发父组件的ParentHandleDelete方法。

转载于:https://www.cnblogs.com/judyh/p/9979482.html

weixin_30362233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
父子组件间传值

此案例实现的功能是，一个简单待办事项的功能，可以添加和删除事项。主要为了表述父子组件间的传值方式。父组件向子组件传值：使用props传值，单向数据流子组件向父组件传值：通过Events触发<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...
复制链接

扫一扫