子组件向父组件传值相对来说繁琐，子组件中需要在方法中使用$emit向父组件自定义事件对应的方法传值，父组件需要在自定义对应的方法中接收子组件传来的值
$emit接收两个参数：
参数1：父组件自定义事件
参数2：要传递的值
用伪代码表示一下流程如下：
子组件中
data中：
info:'子组件内容'
template中：
<button v-on:click="Pass"></button>
methods中：
Pass:function(){
this.$emit('parent_event', this.info)
}
父组件中
data中
msg:''
template中
<p>{{msg}}</p>
<子组件 v-on:parent_event="Receive" />
methods中：
Receve:function(val){
this.msg = val
}
整体实例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="panel panel-default" id="app">
<div class="panel-heading">
<div class="panel-title">APP父组件</div>
</div>
<div class="panel-body">
<blockquote class="blockquote-reverse">
<p>父组件接收子组件传来的值</p>
<footer>
子组件发来的信息：<span class="bg-danger">{{son_info}}</span></footer>
</blockquote>
<div class="row">
<div class="col-lg-4">
<!--使用parent_change事件接收子组件传来的值，并传递给ChangeObj方法-->
<Com1 @parent_change="ChangeObj"></Com1>
</div>
<div class="col-lg-4">
<!--使用parent_change事件接收子组件传来的值，并传递给ChangeObj方法-->
<Com2 @parent_change="ChangeObj"></Com2>
</div>
<div class="col-lg-4">
<!--使用parent_change事件接收子组件传来的值，并传递给ChangeObj方法-->
<Gcom @parent_change="ChangeObj"></Gcom>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 定义一个全局子组件
Vue.component('Gcom', {
data:function () {
return {
gcom_blog:{
id:8,
title:'Gcom中的博客标题'
},
gcom_info:'Gcom组建中的信息'
}
},
template:`
<div class="panel panel-danger">
<div class="panel-heading">
<div class="panel-title">Gcom全局子组件</div>
</div>
<div class="panel-body">
{{gcom_blog.id}}——{{gcom_blog.title}}
<button class="btn btn-danger" v-on:click="SonPass">Gcom向父组件传值</button>
</div>
</div>
`,
methods:{
SonPass:function () {
// 向parent_change事件传递值
this.$emit('parent_change', this.gcom_info)
}
}
})
//定义一个局部组件com1
let Com1={
data:function () {
return {
com1_info:'Com1组件信息'
}
},
template:`
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">Com1子组件</div>
</div>
<div class="panel-body">
{{com1_info}}<br>
<button class="btn btn-primary" v-on:click="SonPass">Com1向父组件传值</button>
</div>
</div>
`,
methods:{
SonPass:function () {
// 向parent_change事件传递值
this.$emit('parent_change', this.com1_info)
}
}
}
//定义一个局部组件com2
let Com2={
data:function () {
return {
com2_info:'Com2组件信息'
}
},
template:`
<div class="panel panel-warning">
<div class="panel-heading">
<div class="panel-title">Com2子组件</div>
</div>
<div class="panel-body">
{{com2_info}}<br>
<button class="btn btn-warning" v-on:click="SonPass">Com2向父组件传值</button>
</div>
</div>
`,
methods:{
SonPass:function () {
// 向parent_change事件传递值
this.$emit('parent_change', this.com2_info)
}
}
}
// 父组件app
new Vue({
el:'#app',
data:function () {
return {
app_user:{
name:'孙悟空',
age:529
},
// 用来接收子组件传来的值
son_info:''
}
},
// 挂载子组件、全局组件不用挂载
components:{
Com1,
Com2
},
methods:{
// 该事件接收子组件传来的值
ChangeObj:function (val) {
this.son_info=val
}
}
});
</script>
</body>
</html>
效果图如下
image.png
网友评论