Javascript 提供一个ref，将其注入带有Vue js的子组件中

任何人都知道如何

提供子组件的引用。例如：

Parent
组件提供参考：

<template>
  <div ref="myRef" />
</template>

<script>
export default {
  name: 'SearchContainer',
  provide: {
    parentRef: this.$refs.myRef
  }
}
</script>

</style>


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

<template>
  <div />
</template>

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

</style>


导出默认值{
方法：{
changeParentStyle（）{
此.$emit（'change-style'）
}
}
}

家长：

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

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

</style>


导出默认值{
名称：“SearchContainer”，
方法：{
changeStyle（）{
//更改影响样式的属性
}
}
}
听起来你在考虑使用插槽？你想实现什么？我想更改
子
中的
父组件
的样式。（不使用
getElementById
）我想在子对象打开时隐藏父对象（子对象是模态，父对象是列表）听起来像是XY问题。如果子组件中的某个事件会导致父组件中的更改，那么您应该发出该事件，并让父组件自己处理如何处理该事件。是的，回答是thx，这是最好的可能性，但我想知道如何提供一个ref。使用React，我认为可以使用上下文“提供”一个ref，我认为即使使用ref和提供/注入也应该被视为不好的实践提供/注入很少用于祖父母和孙辈组件之间的通信，这有一些问题反应性问题
<template>
  <child @change-style="changeStyle" />
</template>

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

</style>