vue 父子之间之间传值

1、在项目里新建一个component目录,然后在目录下新建demo.vue 文件(文件名字根据自己起有意义的)
2、子组件页面代码

<template>
	<view class="">
		<view class="">{{msgs}}</view>
		<button type="default" @click="btn">点击改变上面的文字</button>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				data_s:"我是子组件里的文字"
			}
		},
		props:{
			"msgs":String//子组接收父组件传来的值
		},
		methods:{
		//子组件的点击事件
			btn(){
				this.$emit("dianji",this.data_s)
				//"dianji"是父组件触发自定义事件名称、随意起名
				//this.data_s 是子级传给父级的文字
			}
		}
	}
</script>

<style>
</style>

3、父组件页面代码

<template>
	<view class="content">
			<Mycomponent :msgs="fuzujian" @dianji="fujibtn"></Mycomponent>
			<!-- 'msgs'是传给子组件的 'fuzujian'是父组件里定义的数据 -->
		</view>
	</view>
</template>

<script>
	//引入组件
	import Mycomponent from "../../component/demo.vue"
	export default {
		data() {
			return {
				fuzujian:"你好,我是父组件传过去的",
		},
		components:{
			Mycomponent 
			//定义组件
		},
		methods: {
			//父组件触发的事件
			fujibtn(txt){
				this.fuzujian = txt
				console.log(txt)
				//打印结果为 我的子组件里的文字  可以赋值给父级
			}
		}
	}
</script>
<style>
</style>
Logo

前往低代码交流专区

更多推荐