【老司機帶你飛】vue.js腳手架（六）

事件傳值（子向父）

App.vue

<template>
  <div id="app">
    <User v-bind:users="users" v-bind:title="title" v-on:changeAllTitle="changeAllTitle"></User>
    <User v-bind:users="users" v-bind:title="title"></User>
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return {
      title:"易動學院",
      users:[
        {username:"張三",age:28,sex:"男"},
        {username:"李四",age:29,sex:"女"},
        {username:"王五",age:30,sex:"男"},
        {username:"趙六",age:31,sex:"女"},
      ]
    }
  },
  methods:{
    changeAllTitle:function (msg) {
      this.title = msg;
    }
  }
}
</script>

<style scoped>
</style>

User.vue

<template>
    <div class="user">
      <h1>{{title}}</h1>
      <ul>
        <li v-for="user in users">{{user.username}}--{{user.age}}--{{user.sex}}</li>
      </ul>
      <button @click="deluser">刪除</button>
      <button @click="changeTitle">修改標題</button>
      <button @click="chanAllTitle">修改全部標題</button>
    </div>
</template>
<script>
    export default {
      props:["users","title"],
        name: "User",
      methods:{
        deluser:function () {
          this.users.pop();
        },
        changeTitle:function () {
          this.title = "vue真好玩"
        },
        chanAllTitle:function () {
          this.$emit('changeAllTitle',"我是從子組件傳過來的值")
        }
      }
    }
</script>
<style scoped>
</style>

QQ：732005030
掃碼加微信