经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue3通过ref操作Dom元素及hooks的使用方法
来源:jb51  时间:2023/1/28 8:43:03  对本文有异议

Vue3 ref获取DOM元素

  1. <div ref="divBox">Hello</div>
  1. import {ref,onMounted} from 'vue'
  1. setup() {
  2. const divBox = ref(null);
  3. onMounted(()=>{
  4. console.log(divBox.value);
  5. })
  6. return{divBox}
  7. }

父组件监听子组件中的元素

 在父组件中的子组件里会打印一个proxy(实例),通过实例去获取里面的属性或者值

  1. setup() {
  2. const commer = ref(null)
  3. onMounted(()=>{
  4. console.log(commer);
  5. console.log(commer.value);
  6. })
  7. return {
  8. commer
  9. }
  10. }

看这个例子:

父组件:

  1. <template>
  2. <div class="about">
  3. <h1>This is an about page</h1>
  4. <com ref="commer"></com>
  5. <h3>通过ref用父组件接收子组件中的宽和高:<span>{{numWidht}} {{numHeight}}</span></h3>
  6. </div>
  7. </template>
  8. <script>
  9. import com from '../components/com.vue'
  10. import {ref,onMounted} from 'vue'
  11. export default {
  12. components: {
  13. com
  14. },
  15. setup() {
  16. const commer = ref(null)
  17. const numWidht = ref(0);
  18. const numHeight = ref(0)
  19. onMounted(()=>{
  20. numWidht.value =commer.value.width
  21. numHeight.value =commer.value.height
  22. })
  23. return {
  24. commer,numWidht,numHeight
  25. }
  26. }
  27. }
  28. </script>

子组件:

  1. <template>
  2. <h1>屏幕尺寸:</h1>
  3. <h1>宽度:{{width}}</h1>
  4. <h1>高度:{{height}}</h1>
  5. </template>
  6. <script>
  7. // import { ref,onMounted } from 'vue';
  8. import useWindwoResize from '../hooks/useWindowResize'
  9. export default {
  10. setup(){
  11. const {width, height} = useWindwoResize()
  12. return{width,height}
  13. }
  14. };
  15. </script>
  16. <style lang="scss" scoped>
  17. </style>

 hooks页面:

  1. import {onMounted, onUnmounted, ref} from 'vue';
  2. function useWindowResize(){
  3. const width = ref(0)
  4. const height = ref(0)
  5. function onResize(){
  6. width.value = window.innerWidth
  7. height.value = window.innerHeight
  8. }
  9. onMounted(()=>{
  10. window.addEventListener("resize",onResize);
  11. onResize();
  12. })
  13. onUnmounted(()=>{
  14. window.removeEventListener('resize',onResize);
  15. })
  16. return{
  17. width,
  18. height
  19. }
  20. }
  21. export default useWindowResize;

Vue3 hooks

在vue3中的hooks其实就是函数的写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中。这样其实和我们在vue2中学的混入(mixin)比较像。

父组件

  1. <h1>屏幕尺寸:</h1>
  2. <div>宽度:{{ width }}</div>
  3. <div>高度:{{ height }}</div>

引入hooks中的js文件

  1. import useWindwoResize from '../hooks/useWindowResize';
  2. setup(){
  3. const {width, height} = useWindwoResize()
  4. return{width,height}
  5. }

新建hooks文件夹在里面新建useWindowResize.js文件,内容如下:

  1. import {onMounted, onUnmounted, ref} from 'vue';
  2. function useWindowResize(){
  3. const width = ref(0)
  4. const height = ref(0)
  5. function onResize(){
  6. width.value = window.innerWidth
  7. height.value = window.innerHeight
  8. }
  9. onMounted(()=>{
  10. window.addEventListener("resize",onResize);
  11. onResize();
  12. })
  13. onUnmounted(()=>{
  14. window.removeEventListener('resize',onResize);
  15. })
  16. return{
  17. width,
  18. height
  19. }
  20. }
  21. export default useWindowResize;

到此这篇关于Vue3通过ref操作Dom元素及hooks的使用方法的文章就介绍到这了,更多相关Vue3通过ref操作Dom元素及hooks的使用方法内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号