Version

3.2.2

Reproduction link

sfc.vuejs.org/

Steps to reproduce

import { defineComponent, h } from 'vue';

const Child = defineComponent({ props: ['attr'], setup(props) { console.log('child received props.attr:', props.attr); }, });

const Parent = defineComponent({ // inheritAttrs: false, render() { return h(Child, { attr: 2 }); }, });

export const Root = defineComponent({ render() { return h(Parent, { attr: 1 }); }, });

What is expected?

2

What is actually happening?

1

We recently had an issue about this and concluded that this is the correct behavior.

@LinusBorg Can you show me the related issue link? This is easy to raise bugs, developers should better declare "inheritAttrs = false" everywhere or else they might find props out of work due to the same name attrs, and the attrs might be passed through v-bind, which is hard to debug...

I think that's normal, with reference toattribute-inheritance Can be used

<script>
export default {
  inheritAttrs: false
}
</script>
<script setup>
import Child from './Child.vue';
</script>
<template>
<Child :foo="2" />
</template>

I think that's normal, with reference toattribute-inheritance Can be used

<script>
export default {
  inheritAttrs: false
}
</script>
<script setup>
import Child from './Child.vue';
</script>
<template>
<Child :foo="2" />
</template>

The problem is, if you don't declare "inheritAttrs = false" explicitly, you may come across implicite bugs.

The most important thing is, I pass the prop "foo" inner in Parent.vue, how it can be overrided by outer one? It sounds like

var a = 1; a = 2; console.log(a); // 1

Isn't it strange?

I think that's normal, with reference toattribute-inheritance Can be used

<script>
export default {
  inheritAttrs: false
}
</script>
<script setup>
import Child from './Child.vue';
</script>
<template>
<Child :foo="2" />
</template>

The problem is, if you don't declare "inheritAttrs = false" explicitly, you may come across implicite bugs.

The most important thing is, I pass the prop "foo" inner in Parent.vue, how it can be overrided by outer one? It sounds like

var a = 1; a = 2; console.log(a); // 1

Isn't it strange?

#5333

I think that's normal, with reference toattribute-inheritance Can be used

<script>
export default {
  inheritAttrs: false
}
</script>
<script setup>
import Child from './Child.vue';
</script>
<template>
<Child :foo="2" />
</template>

The problem is, if you don't declare "inheritAttrs = false" explicitly, you may come across implicite bugs. The most important thing is, I pass the prop "foo" inner in Parent.vue, how it can be overrided by outer one? It sounds like var a = 1; a = 2; console.log(a); // 1 Isn't it strange?

#5333

"because it's from higher-up, it has higher priority." emm.. I need time to digest it. Thanks anyway.