jquery在父组件中访问子组件的DOM元素

父组件

1、引入子组件

import MarkDialog from "@/views/home/digitalMap/markDialog.vue";

2、注册子组件

components: {
      MarkDialog
    },

3、使用子组件

<mark-dialog ref="markDialog"></mark-dialog>

4、通过jquery访问子组件的dom元素

const childDomElement = $(that.$refs["markDialog"].$el);
childDomElement.find('.map-mark').css('background', 'red');
              

注意：$el ：是 用于获取组件内 DOM（包括子组件，当前.vue组件，以及父组件）

在jQuery中，你可以使用.find()方法或者子元素选择器">"来访问子组件的DOM元素。

5、子组件

<template>
  <div class="container">
    <span
      ref="mark-move"
      class="mark-move"
    />
  </div>
</template>