add a component
This commit is contained in:
parent
67d24d3e38
commit
bafece1dba
|
@ -1,7 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<section class="container">
|
<section class="container">
|
||||||
<h2>{{ user.name }}</h2>
|
<user-data
|
||||||
<h2>{{ user.age }}</h2>
|
:first-name="user.firstName"
|
||||||
|
:last-name="user.lastName"
|
||||||
|
:age="user.age"
|
||||||
|
></user-data>
|
||||||
<button @click="setAge">Change Age</button>
|
<button @click="setAge">Change Age</button>
|
||||||
<div>
|
<div>
|
||||||
<input type="text" placeholder="First Name" v-model="user.firstName" />
|
<input type="text" placeholder="First Name" v-model="user.firstName" />
|
||||||
|
@ -14,8 +17,12 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { reactive, computed, watch, ref } from 'vue';
|
import { reactive, computed, watch, ref } from 'vue';
|
||||||
|
import UserData from './components/UserData';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
UserData
|
||||||
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const user = reactive({
|
const user = reactive({
|
||||||
firstName: '',
|
firstName: '',
|
||||||
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
<template>
|
||||||
|
<h2>{{ userName }}</h2>
|
||||||
|
<h3>{{ age }}</h3>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ['firstName', 'lastName', 'age'],
|
||||||
|
computed: {
|
||||||
|
userName() {
|
||||||
|
return this.firstName + ' ' + this.lastName;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
Reference in New Issue