【老司机带你飞】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
扫码加微信