【Vue】 vue2.0父子组件传递函数

最新推荐文章于 2025-03-21 08:35:22 发布

彩笔_小qing

最新推荐文章于 2025-03-21 08:35:22 发布

阅读量1.2w

点赞数

分类专栏： Vuejs 文章标签： vue-js props vue2-0

本文链接：https://blog.youkuaiyun.com/qq_31164127/article/details/78247928

版权

Vuejs 专栏收录该内容

5 篇文章

订阅专栏

这篇博客主要介绍了在Vue2.0中如何实现父组件向子组件传递函数的方法，包括通过props和$emit的方式。作者分享了自己的学习心得，并期待社区的反馈和指正。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习笔记：在vue2.0中，父组件调用子组件时，想要将父组件中的函数体也做传递

1. 通过props ：需要从子组件传参数到父组件时适用

// 父组件.vue

<template>
  <div>
    <ok-input :params='number' :callback='callbackNum'></ok-input>
  </div>
</template>
<script type="text/ecmascript-6">
  import okInput from '../ok-input/okinput.vue';
  export default {
    props: {},
    data() {
      return {
        number: {},
        callbackNum: function (x) {
          console.log(x);
        }
      };
    },
    methods: {
    },
    components: {
      'ok-input': okInput
    }
  };
</script>

// 子组件.vue
<template>
  <div>
      <input v-model='numVal' @change='handleFun'></input>
  </div>
</template>
<script type="text/ecmascript-6">
  import {Input, Select, Option, Button} from 'element-ui';
  import 'element-ui/lib/theme-default/index.css';
  export default {
    props: {
      params: {
        type: Object,
        default: {
          type: ''
        }
      },
      callback: {}
    },
    data() {
      return {
        x: 'hah',    
        numVal: ''
      };
    },
    methods: {
      handleFun(val) {
          this.callback(val); // 将参数传回父组件中的回调函数
      }
    },
    components: {
      'el-input': Input,
    }
  };
</script>

2.通过$emit：只需获得当前操作对象时适用

// 父组件.vue

<template>
  <div>
    <ok-input :params='inputs' @change='handleAge'></ok-input>
  </div>
</template>
<script type="text/ecmascript-6">
  import okInput from '../ok-input/okinput.vue';
  export default {
    props: {},
    data() {
      return {
        number: {}
      };
    },
    methods: {
      handleAge(evt) {
        console.log(evt.target.value); // 接收从子组件传过来的当前对象
      }
    },
    components: {
      'ok-input': okInput
    }
  };
</script>

// 子组件.vue
<template>
  <div>
      <input v-model='numVal' @blur='handleChange'></input>
  </div>
</template>
<script type="text/ecmascript-6">
  import {Input, Select, Option, Button} from 'element-ui';
  import 'element-ui/lib/theme-default/index.css';
  export default {
    props: {
      params: {
        type: Object,
        default: {
          type: ''
        }
      },
      callback: {}
    },
    data() {
      return {
        x: 'hah',    
        numVal: ''
      };
    },
    methods: {
      handleChange(evt) {
        this.$emit('change', evt); // 将当前对象 evt 传递到父组件
      },
    },
    components: {
      'el-input': Input,
    }
  };
</script>