[Vuejs]-Is there a way to leak parent css to child components in Vue?

You can simply create an css class in the parent component with the style you want to have the children use. Then you simply use the class in a child.

The example you have is actually working as how you want it to be, as long as the child-component indeed nested as a child in the parent component.

What we do in our firm is that we always wrap components with a class with the same name as the component name. This makes it really obvious what you are styling if you are doing some weird parent type styling.

ParentComponent:

<template>
    <div>
        <p class="text">Hello World</p>
        <ChildComponent />
    </div>
</template>

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

export default {
    components: {
        ChildComponent
    }
}
</script>

<style>
    .some-class-name {
     /*...*/
    }
    .text {
        font-size: 30px
    }
</style>

ChildComponent:

<template>
    <div class="some-class-name">
        <p class="text">Hello World</p>
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>