vue组件传参之ref引用传参(父拿子值)

父组件拿子组件的变量值。

<template>
	<view class="content">
		<view class="text-area">
			<text @click="toGo">点击我跳转页面哦</text>
		</view>
		<mo-ban ref="hellosss"></mo-ban>
	</view>
</template>

<script>
import moBan from '@/pages/moBan/moBan';
export default {
    
    
	components: {
    
    
		moBan
	},
	data() {
    
    
		return {
    
    
			title: 'Hello'
		};
	},
	methods: {
    
    
		toGo() {
    
    
			//拿到父组件的hello变量
			console.debug('我是接受参数的', this.$refs.hellosss.hello);
			//输出:我是接受参数的 我才有一个参数需要你进行接受
		}
	}
};
</script>

子组件是这样的,只有一个变量

<template>
	<view>
		<!-- 把传递过来的参数进行页面渲染 -->
		<text>我是引用模板中的文字的小憨憨</text>
	</view>
</template>

<script>
export default {
    
    
	data() {
    
    
		return {
    
    
			hello:'我才有一个参数需要你进行接受'
		};
	}
};
</script>

猜你喜欢

转载自blog.csdn.net/qq_42899245/article/details/107353142