为了建两个页面,parent child 把HelloWorld页面删掉,花费了我整整3个小时。我以为,我以为有时候真的让我很伤心。
待更新。
首先写两个vue页面,parent和child。让parent在App页面中显示,然后让child在parent页面中显示,引用就好了。参考前面的博客。
父亲传给儿子的数据,如何写
<Child title="我是父亲传给儿子什么的那"/>
儿子接收title中的内容
export default {
props: { //写一个props,用来接收父组件穿过来的数据
title: String //title 传的对象, string定义的类型
}
}
//放到html中显示title
{{title}}
简单吧!注意传的对象的类型。
儿子如何发数据给父亲那!
<button v-on:click="sendMsg" type="button" name="button">按钮</button>
data() {
return {
initMsg: "我是儿子,我发数据给你" //定义发送数据内容
};
}
methods: {
sendMsg(event) { //event参数
console.log(this.initMsg); //显示打印到页面上
this.$emit("getInfo", this.initMsg); //发送数据到父组件
}
}
上面的三段代码注解放的位置。
父组件如何接收传递的内容呐。
<Child v-on:getInfo="getInfos" />
{{initMessage}} //显示传递过来的值 ,initMessage使用前先赋值为空
initMessage: "" 写在data方法中
methods: {
getInfos(data) { //定义方法接收子组件传递来的数据
this.initMessage = data; //变量initMessage接收子组件传递过来的数据。
console.log(data);
}
}
上面就写了父子组件的传值。欢迎评论留言指出问题!