vue父子组件之间通信实例

最新推荐文章于 2022-02-28 12:31:25 发布

xyphf_和派孔明

最新推荐文章于 2022-02-28 12:31:25 发布

阅读量217

点赞数

分类专栏： vue.js入门

本文链接：https://blog.csdn.net/xyphf/article/details/83654495

版权

vue.js入门专栏收录该内容

93 篇文章 6 订阅

订阅专栏

一、父组件向子组件传递数据

①获取数据并在父组件上绑定数据

②在子组件使用props接收父组件传递过来数据

③将接收的数据绑定到子组件模板

二、子组件向父组件传递数据

①在子组件上定义一个事件如 @click='handleItemClick'

②在这个方法里面使用this.$emit方法提交一个自定义事件，如 this.$emit("delete",this.index);

③在父组件监听这个自定义事件如： @delete="handleItemDelete"

④在这个事件的方法里面操作父组件的数据：如

handleItemDelete: function() {
this.list.splice(index,1)
}

<body>
  <div id="app">
    <input type="text" v-model="inputValue" />
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
      <todo-item :content="item" 
                 :index="index" 
                 v-for="(item, index) in list"
                 @delete="handleItemDelete">
      </todo-item>
    </ul>
  </div>

  <script>
    var TodoItem = {
      props: ['content', 'index'],
      template: "<li @click='handleItemClick'>{{content}}</li>",
      methods: {
        handleItemClick: function() {
          this.$emit("delete",this.index);
        }
      }
    }

    var app = new Vue({
      el: '#app',
      components: {
        TodoItem: TodoItem
      },
      data: {
        list: [],
        inputValue: ''
      }
    })
    methods: {
      handleBtnClick: function() {
        this.list.push(this.inputValue)
        this.inputValue = ''
      },
      handleItemDelete: function() {
        this.list.splice(index,1)
      }
    }
  </script>
<body>

xyphf_和派孔明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue父子组件之间通信实例

一、父组件向子组件传递数据①获取数据并在父组件上绑定数据②在子组件使用props接收父组件传递过来数据③将接收的数据绑定到子组件模板二、子组件向父组件传递数据①在子组件上定义一个事件如 @click='handleItemClick'②在这个方法里面使用this.$emit方法提交一个自定义事件，如 this.$emit("delete",this.index);...
复制链接

扫一扫

专栏目录