vue 父组件调用子组件的函数

子组件

<template>
  <div>
    child
  </div>
</template>

<script>
  export default {
    name: "child",
    props: "someprops",
    methods: {
      childFunction(e) {
        console.log(e,"ying")
      }
    }
  }
</script>

父组件

<template>
  <div>
    <button @click="clickParent">点击</button>
    <child ref="mychild"></child>
  </div>
</template>

<script>
  import Child from ‘./child‘;
  export default {
    name: "parent",
    components: {
      child: Child
    },
    methods: {
      clickParent() {
        this.$refs.mychild.childFunction("父组件调用");//过this.$refs.ref.method调用
      }
    }
  }
</script>

  

原文地址:https://www.cnblogs.com/YAN-HUA/p/9512308.html

时间: 2024-10-08 14:42:35

vue 父组件调用子组件的函数的相关文章

VUE 父组件调用子组件弹窗

想搞一个新增编辑弹窗,和列表页面分开 先来一个父组件调用子组件弹窗的demo 父组件 <template> <div> <el-button @click="show">按钮</el-button> <!-- 新增编辑弹框子组件 --> <add-or-update :addOrUpdateVisible="addOrUpdateVisible" @changeShow="showAddOr

angular 中父组件调用子组件的方法

angular中 父组件调用子组件的方法 -- 使用 @ViewChild 装饰器修饰子组件,获取方法,调用 除此之外 ViewChild 还可以获取 DOM ,操作 DOM , 详见: https://www.cnblogs.com/monkey-K/p/11567098.html 1. html 中使用 #var 方式标记 子组件 <div style="border: 1px solid red"> <p>子组件:</p>> <ap

vue中父组件调用子组件函数

用法: 子组件上定义ref="refName",  父组件的方法中用 this.$refs.refName.method 去调用子组件方法 详解: 父组件里面调用子组件的函数,父组件先把函数/方法以属性形式传给子组件:那么就需要先找到子组件对象 ,即  this.$refs.refName. 然后再进行调用,也就是 this.$refs.refName.method 如下: 子组件: <template> <div> childComponent </di

vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div></body><script src="node_modules/vue/

Vue父组件调用子组件的方法

vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method调用,例如: 父组件: <template> <div @click="fatherMethod"> <child ref="child"></child> </div> </template> <script> import child from '~/componen

父组件调用子组件中的方法- this.$refs.xxx.子组件方法();

子组件中有一个说的方法 在父组件中去调用当你点击的时候 去调用子组件中的方法 fu.vue 在父组件的方法中调用子组件的方法,很重要 this.$refs.mychild.parentHandleclick(); { <template> <div> <button @click="clickParent">点击 调用子组件</button> <child ref="mychild"></child&

父组件调用子组件的方法

我们都知道通过$ref可以获取到某个DOM,但是它也可以用来获取子组件的实例,调用子组件的方法 父组件 子组件 原文地址:https://www.cnblogs.com/xianhao/p/10475314.html

React父组件调用子组件

通点击父组件按钮调用子组件的方法 父组件: import React, {Component} from 'react'; import ChildComponent from './child'; export default class ParentComponent extends Component { render() { return( <div> <ChildComponent onRefChild={this.onRefChild} /> <button on

react 父组件 调用 子组件的方法

1.父组件 // 父组件 onRef = (ref) => { this.child = ref; } handleSearch(params){ // 获取搜索框的值 console.log(params); } <SearchForm search={this.handleSearch.bind(this)} onRef={this.onRef} submit={this.child.onSubmit} ></SearchForm> 2.子组件 // 子组件 compon