父传子
步骤
- 第一步
要在子组件中使用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>