背景
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>