vue子组件向父组件传值

背景

vue实现数据交互之子组件向父组件传值，这里通过点击事件改变父组件的值

方法

子组件User.vue   //点击hello users后改变父组件title

<template>
  <div class="users">
    <h1 v-on:click="change">hello users</h1>
    
  </div>

</template>
<script>
  export default{
    name:"users",
    // props:["users"],

    data(){
      return{
        
      }
    },
    methods:{
      change:function(){
        this.$emit("changeTitle","改变标题")  //这里的事件传向父组件
      }
    }
  }
</script>

<style scoped>
  .users{
    width:100%;
    max-width:1200px;
    margin:40px auto;
    padding:0 20px;
    box-sizing:border-box;

  }

  ul{
    display:flex;
    flex-wrap:wrap;
    list-style-type:none;
    padding:0px;;
  }

  li{
    flex-grow:1;
    flex-basis:200px;
    text-align:center;
    padding:25px;
    border:1px solid #222;
    margin:20px;
  }
</style>

父组件App.vue

<template>
  <div id="app">
    <users v-on:changeTitle="updateTitle($event)"></users> //事件与子组件事件必须同名
    {{title}}
  </div>
</template>

<script>
  import Users from './components/Users'

  export default {

    data(){
      return {
        title:"未改变之前"
      }
    },
    methods:{
      updateTitle:function(title){
        this.title = title
      }
    },
    components:{
      "users":Users

    }
  }

</script>

<style scoped>
  h1{
    color:red;
  }
</style>