常常我们需要组件的拆分,就涉及到父子调用的关系,那么父组件如何调用子组件的属性和方法呢?

子组件child

<template>
<div>
{{msg}}
</div>
</template> <script>
export default {
data () {
return {
msg: ''
}
},
methods: {
fn () {
this.msg = ''
}
}
}
</script>

父组件parent

<template>
<child ref="child"></child>
</template> <script>
import child from './child'
export default {
components: {
child
},
methods: {
handleClick () {
this.$refs.child.fn() // 调用子组件的方法
console.log(this.$refs.child.msg) // 获取子组件的属性
}
}
}
</script>

总结:父组件是通过refs去引用组组件,可以得到子组件的所以属性和方法。

vue父组件如何调用子组件的属性或方法的更多相关文章

  1. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

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

    2019/06/06 在父组件中调用子组件的方法:  1.给子组件定义一个ref属性.eg:ref="childItem"  2.在子组件的methods中声明一个函数.eg: u ...

  3. React Hooks中父组件中调用子组件方法

    React Hooks中父组件中调用子组件方法 使用到的hooks-- useImperativeHandle,useRef /* child子组件 */ // https://reactjs.org ...

  4. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  5. vue父组件中调用子组件的方法

    Vue项目中如何在父组件中直接调用子组件的方法: 方案一:通过ref直接调用子组件的方法: //父组件中 <template> <div> <Button @click= ...

  6. Vue父组件如何调用子组件(弹出框)中的方法的问题

    如果子组件是一个弹出框,只有在触发某个点击事件时弹出框才能出现(也就是说在父组件中的子组件使用上用了v-if),那在父组件上如果不点击弹出框是不能获取到$ref的. 原因就是:引用指向的是子组件创建的 ...

  7. vue 父组件如何调用子组件的函数Methods

    答案就是使用ref即可. <countdown ref="countdown"></countdown> beforeDestroy () { // 切换页 ...

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

    vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method调用,例如: 父组件: <template> <div @click ...

  9. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

随机推荐

  1. 网络流24题 gay题报告

    洛谷上面有一整套题. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 extra ①飞行员配对方案问题.top 裸二分图匹 ...

  2. RSA签名验证

    /// <summary> /// 验证签名 /// </summary> /// <param name="content">待签名字符串&l ...

  3. 【洛谷P1303 A*B Problem】

    题目描述 求两数的积. 输入输出格式 输入格式: 两行,两个数. 输出格式: 积 输入输出样例 输入样例#1: 1 2 输出样例#1: 2 说明 每个数字不超过10^2000,需用高精 emm,显然本 ...

  4. vue学习(1)

    前置的准备学习: ES6简单语法: 1.let和const 2.模板字符串 3.箭头函数 4.对象的单体模式 5.es6的面向对象 6.模块化 1.let和const <script type= ...

  5. Sublime Text3—软件安装、package control插件管理

    一.简介 市面上的编辑器纷繁复杂各有优点,好用的编辑器能让你工作事半功倍,先简单介绍下本文主角Sublime Text编辑器,下面简称Sublime. 1.可用于 Windows.Mac OS X 和 ...

  6. Java String与Stringbuffer

    String 与其它类型的转换,e.g. BigInteger Stringbuffer 诸多函数,replace…… String 不能修改,Stringbuffer 可以修改, 应避免以下的操作: ...

  7. linux服务器上tomcat日志中的中文乱码

    转: 修改tomcat应用日志默认编码格式 前言 今天开发跟我说tomcat日志中的中文不能正常显示,根据以往的经验,我觉得可能跟服务器的编码有关,于是尝试各种方法,但还是没能解决问题. 后来我突然想 ...

  8. gradle下载jar包

    使用IntelliJ IDEA+gradle的时候,有时用到的是公司的jar包,如果在外面就无法访问仓库,因此试着下载所需要的jar包到电脑上.然后发现原来gradle已经缓存到本地上了,可用如下方式 ...

  9. halcon形态学运算

    腐蚀.膨胀.开运算(先腐蚀后膨胀).闭运算(先膨胀后腐蚀) 以halcon自带案例ball.hdev为例(开运算),注意代码有所缩减.关于sort_region函数,参考http://blog.sin ...

  10. JS学习笔记Day7

    一.ES5扩展方法 1.严格模式"use strict" 1)必须加在作用域的开头 2.数组扩展方法 1)indexOf(元素,从哪个下标开始查找) 作用:在数组中查找指定的元素第 ...