Vue父组件主动获取子组件的值和方法

news/2024/7/10 0:34:33 标签: vue, javascript

在父组件使用子组件的代码中,为子组件加上ref="name(自己设置一个名称)"
然后在代码中:

javascript">this.$refs.name(你设置的名字).data	//获取子组件data中的数据
this.$refs.name(你设置的名字).method()	//获取子组件中method中的方法

!!!注意:如果父组件以循环的方式生成子组件,如:

javascript"><component ref="getParameters"
           		  v-for="(item, index) in layers"
                  :is="item.name"
                  :key="index"
              ></component>

this.$refs.name(你设置的名字)将会是一个VueComponent数组,这时候可以先获取数组的长度,再依次遍历:

javascript">for(let i=0; i<this.$refs.name(你设置的名字).length; i++){
	this.$refs[i].name(你设置的名字).method()
	console.log(this.$refs[i].name(你设置的名字).data)
}

例子:
父组件代码:

javascript"><template>
  <div>
  	<my_component ref="child_component"></my_component>
  </div>
</template>

<script>
import child_component from "./child_component"
export default {
  data: () => ({}),
  components:{
        'my_component':child_component
    },
  methods:{
  	get_data_from_child_component(){
  		this.$refs.child_component.whatever()	//父组件调用子组件的方法
  		console.log(this.$refs.child_component.msg)	//父组件调用子组件的值
  	}
  },
  mounted(){
  	this.get_data_from_child_component()
  },
};
</script>

子组件代码:

javascript"><template>
  <div></div>
</template>

<script>
export default {
  data: () => ({
  	msg:"这是子组件的值",
  }),
  methods:{
  	whatever(){
  		alert("这是子组件的方法")
  	}
  }
};
</script>


http://www.niftyadmin.cn/n/1842813.html

相关文章

认知维度与API的可用性评估

什么是认知维度 认知维度&#xff08;也称作符号认知维度&#xff0c;Cognitive Dimensions or Cognitive Dimensions of Notations&#xff0c;简称CD&#xff09;是一套关于符号标记、用户界面和编程语言的设计原则。 认知维度提供一种轻量级的方法来帮助分析设计&#xff0c…

JSP的meta标签的解释

http-equiv"Content-Type" 表示描述文档类型 content"text/HTML; 文档类型&#xff0c;这里为html,如果JS就是text/javascript&#xff0c; charsetutf-8 页面字符集&#xff0c;编码&#xff0c;eg:gb2312,iso-8859-1,utf-8 meta标签 meta是html语言head区的一…

Python3中的类与self详解

在使用Python3刷LeetCode时&#xff0c;我们可以看到&#xff0c;每一个解都是包含在一个Solution类中的&#xff0c;并且函数的第一个参数都是self。那么Python中self究竟是什么呢&#xff1f; 推荐大家自己动手写写代码&#xff0c;将会极大地帮助理解 Python中规定&#xff…

Python3必备刷题基础

list(可变) list.insert(index, obj) 在index处插入对象 list.index(obj, start, end) 找出与obj第一个匹配项的索引位置&#xff0c;start和end可选。 list.remove(obj) 移除列表中某个对象的第一个匹配项 list.append(ob j) 列表末尾添加新的对象 list.pop(index-1) -&g…

SSH框架项目+jsp页面+MySQL数据库,数据中文乱码问题解决方案合集

首先申明&#xff0c;转载至&#xff1a;http://blog.csdn.net/chenmeng2192089/article/details/7994352 这篇文章&#xff0c;非常有用的解决我所遇到的问题&#xff0c;很感谢原作者。所以转载分享! 1.页面 每个页面上加上 这样在jsp页面里,点右键,查看编码方式则为UTF-8…

二叉查找树的查找、插入、删除

二叉查找树&#xff08;英语&#xff1a;Binary Search Tree&#xff09;&#xff0c;也称为二叉搜索树、有序二叉树&#xff08;Ordered Binary Tree&#xff09;或排序二叉树&#xff08;Sorted Binary Tree&#xff09;&#xff0c;是指一棵空树或者具有下列性质的二叉树&am…

通过VMware安装Linux系统

目录安装VMware workstation下载Linux镜像安装虚拟机安装Debian相关信息本篇文章介绍如何在windows系统下&#xff0c;通过VMware安装 Linux系统 。安装VMware workstation 首先是去下载VMware workstation这个软件&#xff0c;然后安装。 具体的安装步骤可以在网上找。 VMwa…

0RACLE的字段类型

字段类型描述字段长度及其缺省值 CHAR (size) 用于保存定长(size)字节的字符串数据。每行定长&#xff08;不足部分补为空格&#xff09;&#xff1b;最大长度为每行2000字节&#xff0c;缺省值为每行1字节。设置长度(size)前需考虑字符集为单字节或多字节。VARCHAR2 (size) …