vue中props的用法

vue使用props的用法
日常编程中都会用到父组件用子组件、子用父的情况，下面先介绍一种子传父的情况
1、在父组件中
(1)、首先是在其定义一个list属性以存储其数据值
(2)、定义一个绑定属性“mlist”，以为后续props做铺垫,

<template>
  <div class="hello">
    <h2>我是父组件,我需要建立一些参数</h2>
    <span><mHome :mlist="list"/></span>
  </div>
</template>

<script>
import mHome from "@/views/Home.vue";
export default {
  components: {
    mHome,
  },
  data() {
    return {
      list: ["小米", "华为", "苹果", "三星"],
      msg:'武汉'
    };
  },
};
</script>

2、在子组件中
（1）先定义props属性，将其父组件所传递的“mlist”属性传输过来（要与父组件定义的名称保持一致）
（2）循环遍历其props的属性，以便展示到其页面中

<template>
  <div class="home">
    <h1>我是子组件</h1>
    <h2>请输入相关手机型号</h2>
    <span v-for="(item, index) in mlist" :key="index">{{ item }}</span>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  props: ["mlist"],
};
</script>

3、效果图展示

总结：
1、注意其props所使用的名称与父组件绑定的属性名称保持一致
2、步骤：在父组件引入子组件的页面 =》子组件中定义props之后直接使用数据即可