如题,要实现在Vue项目中,父组件页面App.vue向子组件Card.vue传递参数,实现方法如下:
一、在父组件中,注册子组件并使用:
在js部分注册子组件
在data中定义需要传递到子组件的数据msg
代码如下:
//注册子组件
import Card from './components/Card'
export default {
name: 'App',
data() {
return {
//定义需要传递的信息
information:'父组件向子组件传递的信息'
}
},
components: {
Card
}
}
父组件页面中,在子组件的标签上需要绑定该属性msg,在子组件页面中就可以通过msg来访问到父组件的information属性
<template>
<div id="app">
<Card :msg="information" />
</div>
</template>
二、子组件中通过props接受传输的msg
<template>
<div>
<p>{{ msg }}</p>
</div>
</template>
<script>
export default {
name: 'Card',
//接受传入的参数
props: [ 'msg' ],
mounted(){
//调用传入的参数msg,即“父组件传递给子组件的信息”
console.log(this.msg)
}
}
</script>