也就是说在父组件使用子组件的时候，子组件最外层样式大小是百分比的话是根据父组件中调用子组件位置外层父级元素的大小来的吗

是的，当父组件使用子组件时，子组件最外层样式大小设置为百分比时，它是相对于父组件中调用子组件的位置外层父级元素的大小来确定的。具体来说，子组件的大小会根据父组件中调用子组件的位置外层父级元素的宽度和高度进行相应的百分比计算。这样可以实现子组件的自适应布局，使其在不同父组件中能够根据父组件的大小进行适配。

相关问题

vue2 父组件调用子组件 添加class

在Vue2中，父组件可以通过ref来调用子组件的方法和属性。如果你想在父组件中给子组件添加class，可以通过ref来获取子组件的DOM元素，然后使用classList.add()方法来添加class。

下面是一个示例代码：

<template>
  <div>
    <ChildComponent ref="child"></ChildComponent>
    <button @click="addClassToChild">Add Class to Child</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    addClassToChild() {
      this.$refs.child.$el.classList.add('my-class');
    }
  }
}
</script>

在上面的代码中，父组件通过ref="child"来引用子组件，并在按钮的点击事件中调用addClassToChild方法。该方法通过this.$refs.child.$el获取到子组件的DOM元素，然后使用classList.add()方法来添加class。

请注意，这里假设子组件的名称为ChildComponent，并且子组件的模板中有一个根元素。如果子组件没有根元素，你可以在子组件的最外层包裹一个div元素。

子组件顶不到父组件外公共组件的高度

子组件无法顶到父组件外公共组件的高度可能是因为存在一些布局或样式的问题。以下是一些可能的解决方案：

1. 确保父组件和外公共组件都具有正确的高度设置。您可以使用CSS属性来设置高度，如height或min-height，并确保它们适当地适应内容。

2. 检查是否存在其他元素或样式规则阻止子组件扩展到所需的高度。可能存在一些外层容器或其他元素具有固定高度或溢出隐藏的属性，导致子组件无法顶到外公共组件的高度。您可以检查并调整这些元素或样式规则。

3. 使用CSS布局技术来确保子组件能够扩展到所需的高度。您可以尝试使用flexbox或grid布局来设置父组件和外公共组件的样式，以便子组件可以正确地填充空间。

4. 如果以上方法都无效，您可以尝试使用JavaScript来动态计算和设置子组件的高度。通过获取父组件和外公共组件的高度，并将其应用于子组件，可以确保子组件顶到所需的高度。

请根据您的具体情况尝试这些解决方案，并根据需要进行调整。如果您能提供更多的代码或具体情况描述，我可以给出更具体的建议。