由于入口文件引用父组件,所以要将子组件导入到父组件显示,
import Child from "./child"
在data同级下创建components:{ },在里面添加导入的组件名
components:{
Child
}
然后引入,并给它赋值一个参数
<Child title="爹给儿子一个亿" />
子组件中data同级下使用props接收
props:["title"]
显示
{{title}}
在子组件往父组件中传递数据就需要用到点击事件了
<button @click="sendMoney">赚钱</button>
data同级下创建method,里面用来实现方法,this.$emit表示将内容封装到money中,通过@money调用
methods:{
sendMoney(){
this.$emit("money","儿子把钱翻了5倍还给爹")
}
}
父组件接收信息
<Child @money="getMoney" title="爹给儿子一个亿" />
getMoney的参数就是money的具体值,所以要声明一个变量,将参数传递到变量中并显示。
初始化变量:
data(){
return{
Text:"父组件",
Money:""
}
将值传入到变量中:
methods:{
getMoney(data){
this.Money = data
}
}
显示:
{{Money}}