父子组件传值

0、对子组件的处理

0-1、定义一个子组件

组件的名字是以大写字母开头的
驼峰命名

//components/MovieItem.vue
<script>
export default {
  name: "MovieItem"
};
</script>

0-2、在app.vue中导入子组件

//导入子组件;
<script>
import HomeTable from './components/MovieItem'
</script>

//需要在components属性中注册;
<script>
import HomeTable from './components/MovieItem'
export default {
  name: 'app',
  ....
  components:{
    MovieItem
  }
}
</script>

//在模板中使用
<template>
  <div id="app">
        //可以使用下划线命名使用
      <Movie_Item></Movie_Item>
  </div>
</template>

1、父组件向子组件传值

1-1、父组件传递

给父组件里面的子组件定义一个属性(定义的属性名自己定)，接收父组件传递过来的参数

<MovieItem :data="item" v-for="item of movies" :key="item.id"></MovieItem>

1-2、子组件接收传递过来的数据

//子组件接收的参数需要在props属性中注册

<script>
  export default{
    name:"MovieItem",
    props:{
      data:{
        type:Object
      }
    }
  }
</script>

1-3、子组件中使用数据

<template>
  <div>
    <img :src="data.images.small" alt="">
    <p>{{data.title}}</p>
  </div>
</template>

2、子组件自定义事件向父组件传值

2-1、子组件自定义事件

使用$emit方式自定义事件，向父组件传参

<button @click="handleDelete(index)">删除</button>
<script>
export default {
  ...
  methods:{
    handleDelete(index){
      this.$emit("deleteItem",index)
    }
  }
};
</script>

2-2、父组件接收子组件传递过来的事件参数

<MovieItem :data="item" v-for="item of movies" :key="item.id" @deleteItem="handleDelete"></MovieItem>
<script>
import MovieItem from './components/MovieItem'
export default {
  name: 'app',
  ...
  methods:{
    handleDelete(index){
      console.log(index)
    }
  }
}
</script>