vue 自定义组件（父级，子级组件）传参

父组件：

<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>

自此完成

最后

以上就是健壮星星为你收集整理的vue 自定义组件（父级，子级组件）传参的全部内容，希望文章能够帮你解决vue 自定义组件（父级，子级组件）传参所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。