Vue学习笔记3.1 子-父组件传递数据 v-bind、v-on、$emit()

子向父传递组件：

示例：

在通过点击列表元素后自动删除所点击的列表。

先放完整的代码先：

  
  


  

    
    提交
    

      
    
  

 

1.子组件建立点击事件发生数据变更函数触发：

    $emit()中的第一个参数是事件名（名字随便取），第二个是传出的参数

var TodoItem = {
  props: ['content', 'index'],
  template: "
{{content}}
",
  methods: {
    handleDeleteClick: function() {
      this.$emit('delete', this.index)
    }
  }
}

2.父组件通过监听delete(根据$emit中的第一个参数名字来决定）

3.根据监听delete的函数进行数据处理完成子-父传递数据的过程：

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

对了 v-bind==:

v-on==@ 也就是说

v-bind:content="item"   == :content="item"

v-on:click="handleBtnClick == @click="handleBtnClick