子组件向父组件传值（通过事件形式）
当我们点击“Vue Component Demo!”后，子组件向父组件传递值，文字由原来的“vue chaix”变成“chaix通过emit到app.vue修改title值”，实现子组件向父组件值的传递。
<template>
<header @click="changeTitle" class="header">
<h1>{{title}}{{sendTitle}}</h1>
</header>
</template>
<script>
export default {
props:{
sendTitle: {
type: String
}
},
data(){
return {
title:'Vue Component Demo!'
}
},
methods: {
changeTitle(){
//注册事件，参数1:事件名称； 参数2:值
this.$emit("titleChange","chaix通过emit到app.vue修改title值")
}
}
}
</script>
<style scoped>
.header {
background: lightgreen;
padding: 10px;
}
h1 {
color: #222;
text-align: center;
}
</style>
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
<!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
<!-- <h1>App.vue</h1> -->
<!-- 3.调用组件 -->
<Header @titleChange="updateTitle" :sendTitle="title"></Header>
<!-- 父组件向子组件Users传值，等号左边是自定义的变量名，右边是要传过去的data的值。
传值有两种情况：1.传值；2.引用-->
<Users :sendUsers="users"></Users>
<hr>
<Users :sendUsers="users"></Users>
<Footer :sendTitle="title"></Footer>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
//1.局部调用组件
import Users from './components/Users';
import Header from './components/Header';
import Footer from './components/Footer';
export default {
name: 'app',
data(){
return{
users : [
{name:'chaix1', wechat:'790877475', show: false},
{name:'chaix2', wechat:'790877475', show: false},
{name:'chaix3', wechat:'790877475', show: false},
{name:'chaix4', wechat:'790877475', show: false},
{name:'chaix5', wechat:'790877475', show: false},
{name:'chaix6', wechat:'790877475', show: false}
],
title: 'vue chaix'
}
},
//2.注册组件
components: {
// HelloWorld
Users: Users, //相当于Users 可使用双引号“Mr-chaix”，推荐官方写法Users
Header,
Footer
},
methods: {
updateTitle(updatedTitle){
// window.console.log(updatedTitle);
this.title = updatedTitle;
}
}
}
</script>
<style scoped>
h1 {
color: purple
}
</style>
