Vue的父组件通过props向子组件传值

父传子

步骤

• 第一步
  要在子组件中使用props属性，定义接收来自父组件中传来的参数，可以有多个参数。
• 第二步
  父组件导入并注册子组件，用v-bind绑定要传入子组件的参数内容

简单案例演示

//子组件
<template>
  <div>{{msg}}</div> //传参成功后，msg的内容会显示在前端页面
</template>

<script>
export default {
  props: ['msg']  //①定义msg接收父组件传来的参数
}
</script>

//父组件
<template>
    <ListComp v-bind:msg="message"></ListComp>  //④调用子组件，并给子组件传参，这里v-bind后面绑定的参数名与子组件ListComp的props中的变量名是一致的，message是父组件中定义的要传给子组件的内容
</template>

<script>
// @ is an alias to /src
import ListComp from '../components/Popularity/ListComp'  //②导入子组件
export default {
  data: function () {
    return {
      message: 'helloworld'  //⑤父组件中定义要传给子组件的内容
    }
  },
  components: {
    ListComp //③注册子组件
  }
}
</script>