学无先后,达者为师

网站首页 编程语言 正文

uni-app 组件与页面事件传值 this.$emit

作者:maoge_666 更新时间: 2023-07-15 编程语言

1、组件内页面 test.vue

<template>
    <view>
    	<text>我是test组件{{title}}</text>
        <button type="primary" @click="test">按钮传值回调</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {     
               myname:'哈哈'           
            };
        },
        props:{
        title:''
        },
        methods:{
            test(){
                console.log("组件中的按钮点击事件")
                //触发子视图中的该事件方法
                //定义一个事件名,在子页面中触发该方法名
                this.$emit("testShowName",this.myname)
            }         
        }
    }
</script>

2、子页面

<template>
	<view>
		//组件使用
		<test :title="title" @testShowName="testEvent"></test>
	</view>
</template>

<script>
	import test from "@/components/test/test.vue" //引入组建
	export default {
		data() {
			return {
				title:'lele'
			};
		},
		onLoad() {
			
		},
		components: {
			test 
		},
		methods: {
			testEvent(e) {
				console.log("当前事件的值就是:",e)
			}
		}
	}
</script>

原文链接:https://blog.csdn.net/maoge_666/article/details/131663198

  • 上一篇:没有了
  • 下一篇:没有了
栏目分类
最近更新