vue子组件父组件props传参示例

示例一

子组件

<template>
  <div>
    //  通过id拼接url
    <router-link :to="{ path: '/movieDetail', query: { id: _id } }"
      >{{ movieName }}:{{ movieTime }}
    </router-link>
  </div>
</template>
<script>
export default {
  //  子组件接受的参数
  props: [movieName, _id, movieTime],
};
</script>
<style>
</style>

父组件

<template>
  <div>
    <div>
      //  
      <movie-list
        //  for循环遍历
        v-for="item in movieItems"
        :key="item._id"
        //  父组件回传子组件需要的参数数据
        :movieName="item.movieName"
        :_id="item._id"
        :movieTime="item.movieTime"
      ></movie-list>
    </div>
  </div>
</template>
<script>
//  引入子组件
import MovieList from "../components/MovieList";
import axios from "axios";
export default {
  components: {
    MovieList,
  },
  created() {
    //  获取movie的所有参数
    axios.get("http://localhost:3000/movieList").then((data) => {
      //  填充movieItems
      this.movieItems = data.data.data;
    });
  },
  data() {
    return {
      movieItems: [],
    };
  },
};
</script>
<style>
</style>

示例二

子组件

<template>
  <div>
    <div>{{ title }}</div>
    <div v-if="fromUsername">来自{{ fromUsername }}的消息 时间：{{ time }}</div>
    <div v-if="toUsername">发送给{{ toUsername }}的消息 时间：{{ time }}</div>
    <div>{{ content }}</div>
  </div>
</template>
<script>
export default {
  props: ["title", "content", "time", "fromUsername", "toUsername"],
};
</script>
<style></style>

父组件

<template>
  <div>
    <div>
      <h1>收件箱</h1>
      <email-list
        //  for循环遍历
        v-for="item in receiveMail"
        :key="item._id"
        //  父组件回传子组件需要的参数数据
        :title="item.title"
        :content="item.content"
        :fromUsername="item.fromUsername"
        :time="item.time"
      ></email-list>
    </div>
    <div>
      <h1>发件箱</h1>
      <email-list
        v-for="item in sendMail"
        :key="item._id"
        :title="item.tile"
        :content="item.content"
        :toUsername="item.toUsername"
        time="item.time"
      ></email-list>
    </div>
  </div>
</template>
<script>
//  引入子组件
import EmailList from "../components/EmailList";
import axios from "axios";
export default {
  components: {
    EmailList,
  },
  created() {
    // 收件
    axios
      .post("http://localhost:3000/users/showEmail", {
        //  传递后端需要的参数
        token: localStorage.token,
        _id: localStorage._id,
        receive: 10, 
      })
      .then((data) => {
        this.receiveMail = data.data.data.receiveMail;
      });

    // 发件
    axios
      .post("http://localhost:3000/users/showEmail", {
        //  传递后端需要的参数
        token: localStorage.token,
        _id: localStorage._id,
        receive: 11,
      })
      .then((data) => {
        this.sendMail = data.data.data.sendMail;
      });
  },
  data() {
    return {
      receiveMail: [],
      sendMail: [],
    };
  },
};
</script>
<style>
</style>