如何通过children()获取孙子节点

可以使用多个 `children()` 方法来获取孙子节点，如下所示：

// HTML 代码
<div id="parent">
  <div class="child">
    <div class="grandchild">孙子元素1</div>
  </div>
  <div class="child">
    <div class="grandchild">孙子元素2</div>
  </div>
</div>

// JavaScript 代码
$("#parent").children().children().each(function() {
  console.log($(this).text()); // 输出：孙子元素1 和 孙子元素2
});

在这个示例代码中，第一个 `children()` 方法返回 `#parent` 元素的所有子元素，即两个 `div.child` 元素。然后再对每个 `div.child` 元素使用另一个 `children()` 方法，返回它们的所有子元素，即两个 `div.grandchild` 元素。最终使用 `each()` 方法遍历所有的孙子元素，并使用 `text()` 方法获取它们的文本内容。

相关问题

设置el-tree默认展开两级节点，并写一个方法，根据el-tree的节点id找到其子节点跟孙子节点

好的，针对你的问题，我来回答：

1. 设置el-tree默认展开两级节点：

可以通过在el-tree组件中添加default-expand-level属性来设置默认展开的级别。如下所示：

<el-tree :data="treeData" :default-expand-level="2"></el-tree>

2. 写一个方法，根据el-tree的节点id找到其子节点和孙子节点：

可以通过在el-tree组件中添加node-key属性来设置节点的唯一标识。然后，可以使用el-tree组件自带的getNode方法获取指定节点的数据对象。在获取到指定节点的数据对象之后，可以遍历该节点的子节点和孙子节点，实现查找的功能。具体代码如下：

<template>
  <el-tree
    :data="treeData"
    :default-expand-level="2"
    :node-key="nodeKey"
    ref="tree"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级节点1',
          children: [
            {
              id: 11,
              label: '二级节点1-1',
              children: [
                {
                  id: 111,
                  label: '三级节点1-1-1'
                },
                {
                  id: 112,
                  label: '三级节点1-1-2'
                }
              ]
            },
            {
              id: 12,
              label: '二级节点1-2',
              children: [
                {
                  id: 121,
                  label: '三级节点1-2-1'
                },
                {
                  id: 122,
                  label: '三级节点1-2-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级节点2',
          children: [
            {
              id: 21,
              label: '二级节点2-1',
              children: [
                {
                  id: 211,
                  label: '三级节点2-1-1'
                },
                {
                  id: 212,
                  label: '三级节点2-1-2'
                }
              ]
            },
            {
              id: 22,
              label: '二级节点2-2',
              children: [
                {
                  id: 221,
                  label: '三级节点2-2-1'
                },
                {
                  id: 222,
                  label: '三级节点2-2-2'
                }
              ]
            }
          ]
        }
      ],
      nodeKey: 'id'
    };
  },
  methods: {
    findChildAndGrandchildNodes(nodeId) {
      const node = this.$refs.tree.getNode(nodeId);
      const result = [];
      const traverseTree = (node) => {
        result.push(node);
        if (node.children) {
          node.children.forEach(child => {
            traverseTree(child);
          });
        }
      };
      if (node) {
        traverseTree(node);
      }
      return result;
    }
  }
};
</script>

在上面的代码中，我们在el-tree组件中添加了node-key属性，并将其值设置为id，表示节点的唯一标识为id。然后，在methods中，我们定义了一个findChildAndGrandchildNodes方法，该方法接收一个节点id作为参数。在方法内部，我们首先通过this.$refs.tree.getNode(nodeId)方法获取指定节点的数据对象。接着，我们定义了一个result数组，用于存储查找到的子节点和孙子节点。然后，我们使用递归的方式遍历该节点的子节点和孙子节点，并将其存储到result数组中。最后，我们返回result数组，即为查找到的子节点和孙子节点。

这样，我们就实现了根据el-tree的节点id查找其子节点和孙子节点的功能。

谈谈 Vue 中父子、子父、兄弟之间、祖父与孙子节点同通信的方法？

在 Vue 中，父子、子父、兄弟之间、祖父与孙子节点同通信的方法有以下几种：

1. Props/emit：父组件通过 props 将数据传递给子组件，子组件通过 emit 触发事件通知父组件数据变化。

2. $refs：父组件通过 $refs 获取子组件实例，从而调用子组件的方法或访问子组件的属性。

3. $emit/$on：在祖父、父、子组件之间使用 $emit/$on 进行事件的发布和订阅，从而实现通信。

4. Vuex：使用 Vuex 进行全局状态管理，通过 store 中的 state、mutations、actions、getters 统一管理数据流以及组件之间的通信。

5. provide/inject：父组件通过 provide 提供数据，子组件通过 inject 注入数据，从而实现父子组件之间的数据传递。

6. $parent/$children：通过 $parent 获取父组件实例，通过 $children 获取子组件实例，从而进行父子组件之间的通信。

总之，Vue 中提供了丰富多样的组件通信方式，开发者可以根据具体的业务场景选择最合适的通信方式。