VUE中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用

这篇具有很好参考价值的文章主要介绍了VUE中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

场景:自定义一个通用组件,需要调用父组件的方法进行计算

一、使用this.$emit()向父组件触发一个事件,父组件监听这个事件即可。

父组件:

<template>
  <div>
    <child @method="method"></child>
  </div>
</template>
<script>
  import child from './components/childCompoent'
  export default {
    components: {
      child
    },
    methods: {
      method(data) {
        console.log(data+'调用父组件方法');
      }
    }
  };
</script>

子组件:

<template>
  <div>
    <button @click="method()">点击调用父组件方法</button>
  </div>
</template>
<script>
  export default {
    methods: {
      method() {
        this.$emit('method','子组件');
        //this.$emit('method');没有参数的话,直接调用即可
      }
    }
  };
</script>

二、直接在子组件中通过“this.$parent.event”来调用父组件的方法。

父组件:

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from './components/childCompoent';
  export default {
    components: {
      child
    },
    methods: {
      method() {
        console.log('父组件方法');
      }
    }
  };
</script>

子组件:

<template>
  <div>
    <button @click="childMethod()">点击按钮</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.method();
      }
    }
  };
</script>

三、父组件把方法传入子组件中,在子组件里直接调用。

父组件:

<template>
  <div>
    <child :method="method"></child>
  </div>
</template>
<script>
  import child from './components/childCompoent';
  export default {
    components: {
      child
    },
    methods: {
      method() {
        console.log('父组件方法');
      }
    }
  };
</script>

子组件:

<template>
  <div>
    <button @click="childMethod()">点击按钮</button>
  </div>
</template>
<script>
  export default {
    props: {
      method: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
          this.method();
        }
      }
    }
  };
</script>
场景:父组件调用子组件的方法,父组件取值子组件的属性参数

父组件(包含的子组件引用标签中加上ref属性),这时给子组件标签使用ref,引用指向的就是子组件的实例

父组件:

<template>
  <div id="app">
    <test ref="test"/>
    <button @click="gettest">获取test组件中的值</button>
  </div>
</template>
 
<script>
import test from "./components/test.vue";
 
export default {
  components: {
    test
  },
  data() {
    return {}
  },
  methods: {
    gettest() {
      console.log(this.$refs.test.message)
    }
  }
};
</script>

子组件:文章来源地址https://www.toymoban.com/news/detail-757633.html

<template>
  <div>
      {{ message }}
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: "hello world"
    }
  }
}
</script>

到了这里,关于VUE中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue父子组件之间双向数据绑定的(vue2/vue3)

    vue父子组件之间双向数据绑定的四种方法(vue2/vue3) vue考虑到组件的可维护性,是不允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值,而在子组件中可以通过$emit向父组件通信(第一种方式),通过这种间接的方式改变父组件的data,从而实现子组

    2024年02月08日
    浏览(76)
  • Vue3中子组件向父组件传值的方法

    父组件可以通过props向子组件传值, 子组件可以用过 emits(‘update:prop’, propValue) 修改父组件绑定在此Prop上父组件的值 本文演示了一个可以缓存分页大小(每页显示几行数据)的分页组件的使用, 它是对el-pagination做了一个简单的封装 如下是一个分页组件 核心: 在换页时通过 emit

    2024年02月16日
    浏览(40)
  • flutter开发实战-父子Widget组件调用方法

    flutter开发实战-父子Widget组件调用方法 在最近开发中遇到了需要父组件调用子组件方法,子组件调用父组件的方法。这里记录一下方案。 父组件使用globalKey.currentState调用子组件具体方法,子组件通过方法回调callback方法调用父组件的方法。 例如示例中的 例如父组件 父组件使

    2024年02月15日
    浏览(43)
  • 前端vue中父子组件之间的传值(修改值)和事件的相互调用

    目录 父组件向子组件传值 子组件修改父组件中的值: 方法1 方法2 子组件调用父组件里的函数 方法1 方法2 父组件调用子组件的函数 : 子组件中的 data 属性是用来存储子组件自身的数据,而不是用来接收父组件传递的数据的。父组件向子组件传递数据的常用方式是通过 pro

    2024年02月07日
    浏览(57)
  • Vue2嵌入HTML页面空白、互相传参、延迟加载等问题解决方案

    一、需求分析       最近做的一个用H5加原生开发的html项目,现需要集成到Vue2.0项目里面来。遇到的相关问题做个记录和总结,以便能帮到大家避免踩坑。 二、问题记录 1、页面空白问题      将html页面通过iframe的方式嵌入进来之后,发现页面是空白的,不显示任何元素,

    2024年02月13日
    浏览(42)
  • Vue组件通信——父子组件通信的四种方法

    全局引入 在main.js文件中引入并注册 之后就可以全局使用组件了 局部引入 在父组件中引入 之后就可以在父组件中使用组件了 在子组件 prop 中可以注册一些自定义组件属性,父组件调用子组件时可以向 prop 中的自定义属性传值。 子组件代码: 父组件代码 prop 也可以通过 v-

    2023年04月16日
    浏览(104)
  • 项目中使用iframe引入html 解决路由错乱问题以及父子组件传值调用方法

    父组件 子组件: 方法一、通过子组件iframe1向父组件传值,再通过父组件向子组件iframe2传值可达到目的; 注意:模拟时 需要开启服务器,否则会出现跨域问题! 看图你应该就明白了 在项目中使用iframe引入html,引入的html中有路由跳转,当点击html页面中的路由跳转时,浏览器

    2024年02月01日
    浏览(50)
  • vue父子组件之间传值的方法

    父传子 方式: props 效果: 把父组件的 fatherName 属性传入子组件,在子组件中使用 父组件代码: 子组件代码: 子传父 方式: $emit 效果: 在子组件触发事件,修改父组件的fatherName属性 父组件代码: 子组件代码: 兄弟传值 方式: eventBus.js 效果: 任意组件之间相互传值 代

    2024年02月09日
    浏览(46)
  • 【vue2第十一章】v-model的原理详解 与 如何使用v-model对父子组件的value绑定 和修饰符.sync

    v-model的原理详解 v-model的本质就是一个语法糖,实际上就是 :value=\\\"msg\\\" 与 @input=\\\"msg = $event.target.value\\\" 的简写。 :value=\\\"msg\\\" 从数据单向绑定到input框,当data数据中的msg内容一旦改变,而input框数据也随之改变。 @input=\\\"msg = $event.target.value\\\" 是为input框绑定了input事件,内容改变则触发

    2024年02月10日
    浏览(41)
  • vue组件之间的五种传值方法(父子\兄弟\跨组件)

    父传子 (自定义属性 props) 父组件向子组件传参,通过自定义属性的方式进行传参,在子组件中使用prop定义自定义的属性,然后在父组件中通过v-bind指令把需要传递的数据绑定在子组件上,那在子组件中props里面的自定义属性可以直接使用。 子传父 (自定义事件 this.$emit) 子组

    2023年04月08日
    浏览(79)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包