Vue参数传递之props属性

通过属性的方式将数据传递到子组件：

1.给组件传递参数之 数据    对方定义了一个叫todos的参数 

子组件：接受到参数：  //方法也是一样

props: ['todos', 'deleteTodo'],//定义接收的参数  方法  和  属性 都可   方法当方法用  参数当参数用

2.父组件：将定义的数据传递过子组件

定义的数据

export default {
  data() {
    return {
      todos: [/
        {
          id: String(Math.random()).substring(3, 10),
          title: '学习',
          done: true,
        },
        {
          id: String(Math.random()).substring(3, 10),
          title: '喝酒',
          done: true,
        }]
    }
  }
}

传递数据

<MyList :todos='todos'></MyList>

3.子组件收到数据：

<li v-for='t in todos' :key='t.id'>

4.下面是传递方法  也是一样

<MyList   :deleteTodo='deleteTodo'></MyList>

methods: {
    deleteTodo(id) {
      for (let i = 0; i < this.todos.length; i++) {
        if (id == this.todos[i].id) {
          console.log(this.todos[i].title + '被删除了！');
          this.todos.splice(i, 1);
        }
      }
    }
  }