下面的provide 和 Inject不是响应式
<template>
我是根组件------{{title}}
<br/>
<input v-model="title"/>
<br/>
<Home/>
</template>
<script>
import Home from './components/Home'
export default {
name: 'App',
data() {
return {
title: 'app组件里面的标题'
}
},
components: {
Home
},
provide() {
return {
title: this.title
}
}
}
</script>
<template>
我是about组件 --- {{title}}
</template>
<script>
export default {
inject: ['title']
}
</script>
使用setup中的Provide 和 Inject实现父子组件传值的时候，子组件改变数据也会影响父组件
<template>
<h1>我是根组件------{{title}} ---- {{user.name}}</h1>
<input v-model="title"/>
<input v-model="user.name"/>
<Home/>
</template>
<script>
import Home from './components/Home'
import { ref, provide, reactive } from 'vue'
export default {
name: 'App',
setup() {
let title = ref('app根组件title')
let user = reactive({
name: '张三'
})
provide('title', title)
provide('user', user)
return {
title,
user
}
},
components: {
Home
},
}
</script>
<template>
<p>我是about组件 --- {{title}}---------- {{name}}</p>
<input v-model="title"/>
<input v-model="name"/>
</template>
<script>
import { inject, toRefs} from 'vue'
export default {
setup() {
let title = inject('title')
let user = inject('user')
return {
title,
...toRefs(user)
}
}
}
</script>
