父组件直接触发子组件中的函数

还是上回点击按钮出现弹窗，弹窗中有tree组件的功能。我们需要封一个弹窗组件，在弹窗组件里调用tree组件，而为了各个页面都可以使用这个弹窗，我们在父组件中（这个父组件是弹窗组件的父组件）点击按钮（或者需要弹出弹窗的任何东西）时会触发一个click事件，在它触发的函数中调用弹窗组件中的负责展开功能的函数，就可以完成功能。我们以下代码只做到父组件触发子组件中的函数，其他功能代码都已经删掉。

父组件:

<template><div><button @click="dialogOpen">父组件的触发弹窗按钮</button><commonfiltertreeref="dialogtree"></commonfiltertree></div>
</template>
<script>
import commonfiltertree from "@/components/newCommon/dialog/treeDialog.vue";
export default {components: {commonfiltertree},methods: {dialogOpen() {this.$refs.dialogtree.dialogOpen();  // 调用子组件的方法dialogOpen
        }}};
</script>

子组件:

<template><div class="air-treeDialog-wrappers"><el-dialog:visible.sync="dialogVisible"></el-dialog></div>
</template>
<script>
import commonfiltertree from "@/components/newCommon/tree/tree.vue";
export default {data() {return {dialogVisible: false,};},methods: {//打开弹出框
        dialogOpen() {this.dialogVisible = true;},//关闭弹出框
        dialogClose() {this.dialogVisible = false;}}
};
</script>

over

转载于:https://www.cnblogs.com/dongyuxin/p/9459067.html

父组件直接触发子组件中的函数相关推荐

Vue 父组件如何触发子组件中的方法
子组件 <template><div>child</div> </template><script>export default {nam ...
vue怎么调用子元素的方法_vue.js 父组件如何触发子组件中的方法
文章目录组件组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能 ...
vue父组件变量传递子组件_Vue2.x中的父组件数据传递至子组件
父组件结构 template :girls="aGirls"> script import vGirlGroup from './GirlGroup' export defa ...
vue中使用ts后，父组件获取执行子组件方法报错问题
一.问题产生背景: 子组件的一个方法: update () {this.$nextTick(() => {this.ul_slots.forEach((ul, cur_slots_index) ...
VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
vue 子级拿值_Vue 父组件主动获取子组件的值，子组件主动获取父组件的值
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header" 2. 在父组件中通过this.$refs.header.属性,调用子组件的属性 ...
点击父组件按钮显示子组件_按钮设计用户界面组件系列
点击父组件按钮显示子组件重点 (Top highlight) In order to design the right interactions, we need to look back at ...
Vue.js 父组件向子组件传值和子组件向父组件传值
父组件向子组件传值组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script>// 创建 Vue 实例,得到 ViewModelvar vm = new ...
父组件如何获取子组件的属性和方法-使用Ref
作为一名初学者, 我遇到了一个小问题, 父组件如何获取子组件的属性和方法呢? 如下图所示, div是input和button的父组件, 我想要实现的功能特别简单, 那就是在点击button按钮的时候, ...
父组件传值给子组件子组件向父组件传值的方法
父组件传值给子组件: 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,然后创建一个名为message的属性 3.在App. ...

父组件直接触发子组件中的函数

父组件直接触发子组件中的函数相关推荐

最新文章

热门文章