- 父组件通过props传值
- 子组件将输入框内容传给父组件 $emit
1.父组件通过props传值:
<News :content = 'newsContent'></News>
<script>
export defult{
data(){
return{
newsContent:'振兴中华'
}
}
}
</script>
<h1>内容是:{{content}}</h1>
<script>
export defult{
props:['content']
}
</script>
2.子组件将输入框内容传给父组件 : 自定义事件 $emit
<div>
<input type="text" v-model="username">
<button @click='sendMsg'>将name传给父组件</button>
</div>
<script>
export defult{
data(){
return{
username:''
}
},
methods:{
sendMsg(){
this.$emit('sendParentMsg',this.username)
}
}
}
</script>
<Login @sendParentMsg='getChildMsg'></Login >
从子组件拿来的数据:{{msg}}
<script>
import Login from './component/Login'
export defult{
components:{Login},
data(){
msg:''
},
methods:{
getChildMsg(value){
console.log(value) ==>输出了子元素里拿到的值
this.msg=value
}
}
}
</script>