通常，父组件和子组件之间的交互应该使用道具和发出的事件来完成：

<template>
  <div />
</template>

<script>
export default {
 
  methods:{
      changeParentStyle(){
            this.$emit('change-style')
       }
  }
}
</script>

</style>

父母：

<template>
  <child @change-style="changeStyle" />
</template>

<script>
export default {
  name: 'SearchContainer',
   methods:{
      changeStyle(){
          //change the property that affects your style
       }
   }
}
</script>

</style>

我已经设法做到了为孩子们提供参考。但在我看来，如果你想在父母和孩子之间进行交流，我想你已经得到了布萨杰拉·布拉希姆的答案。
仍然提供参考有它自己的用例。我用它来对话。
下面是我的解决方案：

<!-- Parent Component -->

<template>
    <div ref="myRef"></div>
  </template>
  
<script>
  export default {
    name: 'SearchContainer',
    methods:{
        getMyRef(){
            return this.$refs.myRef
        }
    },
    provide() {
      return{
        parentRef: this.getMyRef
    }
    }
  }
</script>

<!-- Child Component -->

<template>
    <div></div>
</template>

<script>
  export default {
    name: 'SearchContainer',
    methods:{
        useRef(){
            this.parentRef().data // Can access data properties
            this.parentRef().method() // can access methods
        }
    }
    inject: ['parentRef']
  }
</script>