Vue组件间传值总结

1.组件可以由内部的Data提供数据展示，也可以由父组件ajax取到数据后通过prop的方式传值进子组件。

样例:

子组件电影组件，展示标题和评分，声明属性props:["title","rating"]

<template>
    <div>
        <h1>{{title}}</h1>
        <span>{{rating}}</span>
    </div>
</template>

<script>
export default {
    name: 'Movie',
    props:["title","rating"],
    data () {
    return {
      
    }
  }
}
</script>

<style >

</style>

父组件App.vue用到电影组件，取到数据后通过属性赋值到子组件Movie.vue

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <!-- <router-view/> -->
    <First/>
    <Movie title="金刚狼" rating="8.8"></Movie>
    <Movie v-for="movie in movies" :title="movie.title" :rating="movie.rating" :key="movie.id" ></Movie>
  </div>
</template>

<script>
import First from '@/components/First.vue'
import Movie from '@/components/Movie.vue'
export default {
  name: 'App',
  data:function(){
    return {
      movies:[
        {id:1,title:"金刚狼",rating:"8.8"},
        {id:2,title:"金刚狼2",rating:"8.9"},
        {id:3,title:"金刚狼3",rating:"9.0"},
      ]
    }
  },
  components:{
    First,
    Movie
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果：

2.兄弟组件间可以通过VUEX或Pinia等统一数据源提供数据共享