父组件:
<template>
<div>
<p>我在父组件</p>
<p @click="alertClick('值')">点击向子组件传值</p>
<alert v-on:Event_s="backRequest" ref="alert"></alert>
//ref 声明组件 v-on回调事件名
</div>
</<template>
<script>
import material from 'alert';//引入子组件,子组件路径
export default {
data() {
return {}
},
//注册组件
components: {
alert: alert,
},
methods: {
//使用this.$refs 调用alert组件 的myAlert方法
alertClick(val){
this.$refs.alert.myAlert(val);
},
backRequest: function (val) { //接收子组件返回的值,val值应该为:我是子组件返回给父组件的内容
alert(val)
},
},
}
</script>
子组件:
<template>
<p>我在子组件</p>
</template>
<script>
export default {
data() {
return {}
},
methods: {
myAlert(val){
alert(val);
this.return('我是子组件返回给父组件的内容')//调用下面return方法
},
//使用 this.$emit 返回给父级组件内容
return(data) {
this.$emit('Event_s',data);//Event_s 为父级组件用v-on声明的名称
},
},
}
</script>
自此完成