vue $emit 子组件向父组件传值

深藏阁楼爱情的钟 2021-09-07 06:06 507阅读 0赞

子组件通过$emit传递数值

<template>
    	<view class="leave_cont">
    		<view class="flex1">
    			<view>日期: </view>
    			<picker mode="date" :value="start_date" :start="start_date" :end="other" @change="bindDateChange">
    				{
       {start_date}}
    			</picker>
    		</view>
    		<view class="flex1">
    			<view>至: </view>
    			<picker mode="date" :value="start_date" :start="start_date" @change="bindDateChange2">
    				{
       {other}}
    			</picker>
    		</view>
    	</view>
    </template>

export default { 
    		data() { 
    			const currentDate = this.getDate({ 
    				format: true
    			})
    			return { 
    				start_date: '开始时间', //传递给父组件的开始日期
    				end_date: currentDate,
    				other: '结束日期' //传递父组件的结束日期
    			}
    		},
    		watch:{ 
    			start_date(val){ 
    				//通过$emit向父组件传值
    				//this.$emit('父组件绑定名称',值1,值2)
    				this.$emit('getTime1',this.start_date,this.other)
    			},
    			other(val){ 
    				this.$emit('getTime1',this.start_date,this.other)
    			}
    		},
    	}

父页面

<view class="chooise-box">
    	
    	<startime @getTime1="getTime2"></startime>
    </view>

<script>
    	//引用组件
    	import startime from '../statendtime.vue'
    	export default { 
    		components: { 
    			//挂载组件
    			startime,
    		},
    		data() { 
    			return { 
    			};
    		},
    		methods: { 
    			// 获取子组件数据
    			getTime2(start,end){ 
    				console.log(start,end)
    			},
    		}
    	}
    </script>

仅供自己整理，不做他用

发表评论取消回复

表情：

评论列表（有 0 条评论，507人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue-父组件向子组件传值

[子组件向父组件传值，可点击查看][Link 1] 下面示例中是：父组件向子组件的单向数据流父级的更新会向下流动到子组件中，但是反过来则不行。每次父级组件发生更新时，子

太过爱你忘了你带给我的痛/ 2023年07月18日 12:50/ 0 赞/ 117 阅读

相关 vue 父组件向子组件传值

先看代码： 1、父组件： <template> <div> <div v-if="!userShow"> 父组件内容区

￡神魔★判官ぃ/ 2022年04月17日 04:59/ 0 赞/ 334 阅读

相关 vue父组件由向子组件传值

js ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fx

た入场券/ 2022年04月16日 04:07/ 0 赞/ 192 阅读

相关 vue 组件：父组件向子组件传值，以及子组件向父组件传值

1.父组件向子组件传值 <!DOCTYPE html> <html> <head> <meta charset='

矫情吗；*/ 2022年03月28日 04:16/ 0 赞/ 354 阅读

相关 Vue.js 父组件向子组件传值和子组件向父组件传值

父组件向子组件传值 1. 组件实例定义方式，注意：一定要使用`props`属性来定义父组件传递过来的数据 <script> // 创建 Vue

た入场券/ 2022年03月16日 20:16/ 0 赞/ 324 阅读

相关 vue子组件向父组件传值

背景 vue实现数据交互之子组件向父组件传值，这里通过点击事件改变父组件的值方法子组件User.vue //点击hello users后改变父组件titl

傷城~/ 2021年12月12日 07:21/ 0 赞/ 392 阅读

相关 vue父组件向子组件传值

背景 vue要进行数据交互，若父组件要向子组件传值要怎么办那方法父组件的标签引用时，添加v-bind，子组件的props接收注册父组件App.vue

￡神魔★判官ぃ/ 2021年12月12日 06:51/ 0 赞/ 344 阅读

相关 Vue子组件向父组件传值

子组件 props: { props:['childdata'], // 定义在父组件中的变量 }, me

太过爱你忘了你带给我的痛/ 2021年09月15日 12:18/ 0 赞/ 494 阅读

相关 vue父组件向子组件传值

子组件 -------------------- <template> <div class="timeline" > <div v-for=" data in c

以你之姓@/ 2021年09月15日 12:12/ 0 赞/ 525 阅读

相关 vue $emit 子组件向父组件传值

子组件通过$emit传递数值  <template> <view class="leave_cont

深藏阁楼爱情的钟/ 2021年09月07日 06:06/ 0 赞/ 508 阅读