父组件和子组件之间的信息传递:props、自定义事件
①父组件要传递数据给子组件
通过props,传递属性以及属性值给子组件
<News :content="newsContent"/>
子组件要接收来自父组件的数据
子组件:News.vue
<h1>新闻内容是:{{content}}</h1>
export default{
props:['content']
}
②子组件要传递数据给父组件,使用自定义事件
子组件:Login.vue
sendMsg:function(){
this.$emit('sendParentMsg',this.username)
}
//this.$emit('自定义事件名称',要传递的数据)
-----------------------------------------------
父组件:App.vue
<Login @sendParentMsg="getChildMsg" />
// /@自定义事件="处理函数名"
methods:{
getChildMsg(value){
console.log(value);
this.msg=value;
}
}
//这个value就是子组件传来的 this.username