add provide and inject
This commit is contained in:
parent
5e54aa06de
commit
57a4f57109
|
@ -3,7 +3,6 @@
|
||||||
<user-data
|
<user-data
|
||||||
:first-name="user.firstName"
|
:first-name="user.firstName"
|
||||||
:last-name="user.lastName"
|
:last-name="user.lastName"
|
||||||
:age="user.age"
|
|
||||||
></user-data>
|
></user-data>
|
||||||
<button @click="setAge">Change Age</button>
|
<button @click="setAge">Change Age</button>
|
||||||
<div>
|
<div>
|
||||||
|
@ -16,7 +15,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { reactive, computed, watch, ref } from 'vue';
|
import { reactive, computed, watch, ref, provide } from 'vue';
|
||||||
import UserData from './components/UserData';
|
import UserData from './components/UserData';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
@ -45,6 +44,8 @@ export default {
|
||||||
return user.firstName + ' ' + user.lastName;
|
return user.firstName + ' ' + user.lastName;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
provide('user-age', user.age);
|
||||||
|
|
||||||
function setAge() {
|
function setAge() {
|
||||||
user.age = '25';
|
user.age = '25';
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,16 +4,19 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { computed } from 'vue';
|
import { computed, inject } from 'vue';
|
||||||
export default {
|
export default {
|
||||||
props: ['firstName', 'lastName', 'age'],
|
props: ['firstName', 'lastName'],
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const userName = computed(function() {
|
const userName = computed(function() {
|
||||||
return props.firstName + ' ' + props.lastName;
|
return props.firstName + ' ' + props.lastName;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const age = inject('user-age');
|
||||||
|
|
||||||
return {
|
return {
|
||||||
userName
|
userName,
|
||||||
|
age
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Reference in New Issue