tyrel/learnin-some-vue
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

s8e109 from child to parent

Browse Source
This commit is contained in:
Tyrel Souza 2018-04-17 21:39:40 -04:00
parent db1e4c63d2
commit abd9b87b96
No known key found for this signature in database
GPG Key ID: 5A9394D4C30AEAC0
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
section-code/src/components/User.vue
View File

@ -2,11 +2,11 @@
<div class="component"> <div class="component">
<h1>The User Component</h1> <h1>The User Component</h1>
<p>I'm an awesome User!</p> <p>I'm an awesome User!</p>
<button @click="changeName">Change My Name</button> <button @click="changeName">Change My Name from {{name}}</button>
<hr> <hr>
<div class="row"> <div class="row">
<div class="col-xs-12 col-sm-6"> <div class="col-xs-12 col-sm-6">
<app-user-detail :name="name"></app-user-detail> <app-user-detail :name="name" @nameWasReset="name = $event"></app-user-detail>
</div> </div>
<div class="col-xs-12 col-sm-6"> <div class="col-xs-12 col-sm-6">
<app-user-edit></app-user-edit> <app-user-edit></app-user-edit>

14
section-code/src/components/UserDetail.vue
View File

@ -2,16 +2,22 @@
<div class="component"> <div class="component">
<h3>You may view the User Details here</h3> <h3>You may view the User Details here</h3>
<p>Many Details</p> <p>Many Details</p>
<p>User Name: {{ switchName() }}</p> <p>User Name: {{ name }}</p>
<button @click="resetName">Reset Name</button>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ['name'], props: {
name: {
type: String,
}
},
methods: { methods: {
switchName(){ resetName(){
return this.name.split("").reverse().join(""); this.name = 'Tyrel';
this.$emit('nameWasReset', this.name)
} }
} }
} }