学习了组件用法，就像一种嵌套引用关系，在这个关系中，经常会涉及相互传数据的需求，即父组件传子组件，子组件传父组件。
父、子组件的关系可以总结为：
prop
向下传递（父传子），
emit
事件向上传递（子传父），如下图所示：
App.vue它是一个父组件，然后Test和HelloWord，这两个其实就是子组件。这里就是将父组件msg的值传递给了子组件。
<HelloWorld msg="Welcome to Your Vue.js App"/>组件之间的数据是要相互传递的，这里的组件对于整个页面来说，子组件和父组件。
父组件要往子组件里面传数据， 因为有时候子组件的页面展示内容是由你父组件决定的。那父组件给子组件传参的时候来决定子组件到底传递什么内容。
父组件是如何传递给子组件的数据？在子组件当中定义props属性即可。
<script>
export default {
name: 'HelloWorld', //当前页面的名称
//props定义了父组件传递给子组件的数据
props: {
msg: String
}
}
</script>
或者下面写法也行
export default {
name: 'HelloWorld',
props: {
msg: {
Type: String,
default: ''
}
}
}当你在子组件定义了父亲组件传给子组件的props，定义之后也不需要去子组件data里面去声明了，可以直接使用，将这个值放到template里面的。
<template>
<div class="hello">
<h1>{
{ msg }}</h1>HelloWord.vue这个组件，这个页面，这个视图。这个标题是由父亲组件App.vue
<template>
<!--<img alt="Vue logo" src="./assets/logo.png">-->
<!--在下方局部注册了之后，就可以在vue文件当中使用-->
<HelloWorld msg="这个是父组件定义的标题页"/>
<div>
<!--在mianjs全局注册后，即可通过组件名称全局使用-->
<Test></Test>
</div>
</template>
如果不希望写死，可以使用v-bind，前面使用了v-bind之后，在=""的时候就可以传递data属性里面的变量了。如果不使用v-bind，那么""里面就得写死了，不能写变量.
<HelloWorld :msg="msg"/>App.vue
<template>
<Test v-bind:name="name" :content=content></Test>
</template>
<script>
export default {
name: 'App',
data(){
return{
name: "lucas very good",
content: false
}
}
}
</script>Test.vue
<template>
<div>
<button type="button" @click="btn()">Test按钮</button>
<p>content value:{
{ content }}</p>
<p>name value:{
{ name }}</p>
</div>
</template>
<script>
export default ({
//定义父亲组件传递给子组件的数据，属性名为test，类型为string
props:{
name: String,
content: Boolean
},
data() {
return{
}
},
methods:{
btn(){
//在js中使用props数据
console.log(this.content)
console.log(this.name)
console.log("test按钮点击之后效果")
}
}
})
</script>
emit子传父亲(子组件调用父组件方法)
通过this.emit的方式去定义了一个事件，然后将数据放到事件里面去。在父亲组件里面去监听childmsg事件，绑定receive方法，通过receive方法接收子组件传过来的参数。（其实也就是在子组件里面发生了一个事件，这个事件通过emit来定义，最终在父组件里面去监听，监听到该事件，在方法里面拿到相应的数据）
父亲传子比较简单，子传父亲需要定义方法去接受它。
<template>
<!--@是监听事件的，它就是监听childmsg的一个事件-->
<Test v-bind:name="name" :content=content @childMsg="receive"></Test>
</template>
<script>
export default {
name: 'App',
data(){
return{
name: "lucas very good",
content: false
}
},
methods:{
receive(data){
alert(data)
console.log(data)
}
}
}
</script><template>
<div>
<button type="button" @click="btn()">Test按钮</button>
<button type="button" @click="btn1()">传递数据到父组件</button>
<p>content value:{
{ content }}</p>
<p>name value:{
{ name }}</p>
</div>
</template>
<script>
export default ({
props:{
name: String,
content: Boolean
},
data() {
return{
Msg: "你好，我是子组件数据！"
}
},
methods:{
btn(){
console.log(this.name)
console.log(this.content)
},
btn1(){
//this.$emit用于将子组件的数据传递给父组件
//第一个参数表示父组件接受的方法，第二个参数表示具体传递的值
//emit就是子组件调用父组件的方法,这里触发了childMsg事件
this.$emit('childMsg',this.Msg)
}
}
})
</script>