Vue中ref的用法：获取DOM 父获取子数据父使用子方法子调用父方法

获取本页面dom元素

<template><div id="app"><div ref="testDom">11111</div><button @click="getTest">获取test节点</button></div>
</template><script>
export default {methods: {getTest() {//输出<div ref="testDom">11111</div>console.log(this.$refs.testDom)}}
};
</script>

父组件获取子组件中的数据data

子组件
<template><div>{{ msg }}</div>
</template>
<script>
export default {data() {return {msg: "hello world"}}
}
</script>父组件
<template><div id="app"><HelloWorld ref="hello"/><button @click="getHello">获取helloworld组件中的值</button></div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {components: {HelloWorld},data() {return {}},methods: {getHello() {//输出hello worldconsole.log(this.$refs.hello.msg)}}
};
</script>

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

子组件
<template><div></div>
</template>
<script>
export default {methods: {open() {console.log("调用到了")}}
}
</script>父组件
<template><div id="app"><HelloWorld ref="hello"/><button @click="getHello">获取helloworld组件中的值</button></div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {components: {HelloWorld},data() {return {}},methods: {getHello() {this.$refs.hello.open();}}
};
</script>

子组件调用父组件方法：子组件使用emit 父组件使用@

子组件
<template><div>
</div>
</template>
<script>
export default {methods: {open() {console.log("调用了");//  调用父组件方法this.$emit("refreshData");}}
}
</script>父组件
<template><div id="app"><HelloWorld ref="hello" @refreshData="getData"/><button @click="getHello">获取helloworld组件中的值</button></div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {components: {HelloWorld},data() {return {}},methods: {getHello() {this.$refs.hello.open()},getData() {console.log('111111')}}
};
</script>

Vue中ref的用法：获取DOM 父获取子数据父使用子方法子调用父方法相关推荐

Vue中 $ref 的用法
ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例注意:只要想 ...
vue中ref的使用（this.$refs获取为undefined）
如果你获取到的总是空的,你注意一下: 1.你在哪里调用,和你调用的对象试试在mounted()里面调用有效果没有调用的对象是本来就存在的,还是需要数据渲染之后才会出现的,同理,在mounted() ...
vue中ref 的使用
在vue 中 ref 和 refs 的使用: <ul ref="ul" class="his-list listItem" style="pa ...
vue中directives的用法
Vue中directives的用法关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释当前文章主要讲述directives怎么用,directiv ...
【React学习】React中ref的用法
ref可以让react方便快捷地拿到DOM元素,ref的用法主要有两种. 用法1:回调形式的ref 在ref中传入一个回调函数,回调函数的默认参数就是元素对象,给组件加一个属性用来存储元素对象. &l ...
vue中定时器一般用法，定时器函数传参以及清除定时器
一.vue中定时器一般用法(举个例子) 显示当前时间, setInterval()方法会每秒执行一次函数,类似手表功能: <template><div class="use ...
jQuery获取所有父级元素及同级元素及子元素的方法
jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() ...
Java黑皮书课后题第7章：7.15（消除重复）使用下面的方法头编写方法，消除数组中重复出现的值。编写一个测试程序，读取10个数，调用该方法，并显示以一个空格分隔的不同数字
7.15(消除重复)使用下面的方法头编写方法,消除数组中重复出现的值.编写一个测试程序,读取10个数,调用该方法,并显示以一个空格分隔的不同数字题目题目描述与运行示例破题代码 21.11.11 ...
【vue】vue中ref用法
1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...

Vue中ref的用法：获取DOM 父获取子数据父使用子方法子调用父方法

获取本页面dom元素

父组件获取子组件中的数据data

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

子组件调用父组件方法：子组件使用emit 父组件使用@

Vue中ref的用法：获取DOM 父获取子数据父使用子方法子调用父方法相关推荐

最新文章

热门文章

Vue中ref的用法：获取DOM 父获取子数据 父使用子方法 子调用父方法

获取本页面dom元素

父组件获取子组件中的数据data

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

子组件调用父组件方法：子组件使用emit 父组件使用@

Vue中ref的用法：获取DOM 父获取子数据 父使用子方法 子调用父方法相关推荐

最新文章

热门文章

Vue中ref的用法：获取DOM 父获取子数据父使用子方法子调用父方法

Vue中ref的用法：获取DOM 父获取子数据父使用子方法子调用父方法相关推荐