vue子组件向父组件传值

最新推荐文章于 2024-07-23 14:29:05 发布

小姚同志yao

最新推荐文章于 2024-07-23 14:29:05 发布

阅读量177

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/yao_1063066968/article/details/114078845

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<template>
  <div>
    这里是父组件页面：

    <!-- 子向父传值：第二步在父组件中注册子组件，在使用子组件的地方(子组件标签)，定义接收的事件名(绑定对自定义事件的监听) -->
    <get-time @startendtime = 'gettime'></get-time>
    <div>
	    子向父传值，父页面cate得到子页面gettime传来的起止时间:
	    {{starttime}}~{{endtime}}
    </div>
    
  </div>
</template>

<script>
  import GetTime from '../components/GetTime';
  export default {
    components:{
    	GetTime
    },
    data() {
      return {
        starttime:'',
        endtime:'',
      }
    },
    methods: {
      gettime(starttime, endtime) { 
      	// 子向父传值：在父组件接收事件名的方法中接收数据
        // 父组件接收到要显示的值
        this.starttime = starttime;
        this.endtime = endtime;
      },
    },
  }
</script>

<template>
  <div @click="onClick">
    这里是子组件页面：
  </div>
</template>

<script>
  export default {
    data() {
      return {
        starttime:'2021-01-12',
        endtime:'2021-11-12'',
      }
    },
    methods: {
      onClick() { 
      	// 子组件给父组件传值：
        // 1.使用$emit来触发一个自定义事件，并传递一个参数
        // 2.将需要传的值作为$emit的第二、三个参数，
        //   该值将作为实参传给响应自定义事件的方法
        this.$emit('startendtime', this.starttime, this.endtime); 
      },
    },
  }
</script>