Vue中ref的三种用法

序言

最近在开发Vue项目，发现了一个ref的使用场景：将父组件中的值传递给子组件并且调用子组件的方法。

获取dom元素
获取子组件中的data
调用子组件中的方法

1.获取dom元素

通过`this.$refs.name`获取dom元素

// HTML
<div ref="myref">123</div>// JS
let myDOM = this.$refs.myref;
console.log(myDOM); // <div data-v-4bf94fa0>123</div>

2.获取子组件中的data

// 子组件
<template><div>我是子组件</div>
</template><script>
export default {data() {return {name: "myhua"};}
};
</script>// 父组件<template><div id="app"><Son ref="myref"></Son></div>
</template><script>
import Son from "./components/son";
export default {mounted() {console.log(this.$refs.myref.name); //输出子组件data中的name的值：myhua},components: {Son}
};
</script>

3.调用子组件中的方法

// 子组件
<template><div>我是子组件</div>
</template><script>
export default {methods: {logName() {console.log("myhua!!");}}
};
</script>// 父组件<template><div id="app"><Son ref="myref"></Son></div>
</template><script>
import Son from "./components/son";
export default {mounted() {this.$refs.myref.logName();//子组件中的方法},components: {Son}
};
</script>

Vue中ref的三种用法相关推荐

vue中$refs的三种用法
我们都知道,在vue2中获取DOM元素,可以直接在元素上绑定ref属性,然后获取到DOM元素的属性值,这种方法在vue3 中仍然可以使用,但也会有一些问题.下面就介绍$refs的三种用法: 1.vue ...
Java中final的三种用法
在java中final的三种用法: 1. final成员变量 2. final函数 3. final类 final成员变量当你在类中定义变量时,在其前面加上final关键字,那便是说这个变量一旦被初 ...
C++中virtual的三种用法
virtual用法一 #include using namespace std; class A{ public:virtual void display(){ cout<<"A ...
vue中template的三种写法
第一种(字符串模板写法):直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. 第二种:直接写在template标签里,这 ...
vue 中插槽的三种类型
vue中的slot主要分三种 :匿名插槽,具名插槽,作用域插槽一,匿名插槽: 语法:<slot></slot> 1.没有为插槽指定名称 2.通过slot标签可以添加匿名插槽 ...
Mybatis中foreach的三种用法
foreach一共有List,array,Map三种类型的使用场景. foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. item表示集合中每一个元素进行迭代时的别名, i ...
mysql里collection_foreach中collection的三种用法
foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. foreach元素的属性主要有 item,index,collection,open,separator,close. ...
java中super的三种用法
java中super的用法 super只在子类中出现 super有三种用法 [1] super.xxx; xxx可以是类的属性. 例如super.name;即从子类中获取父类name属性的值 [2] ...
C++中using的三种用法
1.导入命名空间 C++命名空间namespace的理解使用C++在写不同的功能模块时,为了防止命名冲突,建议对模块取命名空间,这样在使用时就需要指定是哪个命名空间. 使用 using 导入命名空间 ...
python中else的三种用法
python中else可以在判断语句.循环语句和异常处理中使用. 判断语句 if - else - a = 3 b = 2 if a > b:print("a大于b") el ...

Vue中ref的三种用法

序言

1.获取dom元素

2.获取子组件中的data

3.调用子组件中的方法

Vue中ref的三种用法相关推荐

最新文章

热门文章