开发者学堂课程【Vue.js 入门与实战：复习-父子组件之间的传值】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8202
复习-父子组件之间的传值
内容介绍：
一、 准备工作
二、 父传子
三、子传父
四、父子属性
之前学习了父子组之间传值，今天主要做一个简单的复习：
一、准备工作
打开 code 项目，在这个项目中新建一个 html，名叫 01-父子组件之间传值.html，然后在这里面输入代码。（代码如下：）
代码：
<!DOCTYPE html>
<htm1 lang= "en">
<head>
<meta charset="UTF- 8">
<meta name="viewport" content=”width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<script src="./1ib/vue-2.4.0.js"></script>
</ head>
<body>
<div id="app"></div>
<script>
//创建vue实例，得到viewModelvar vm= new vueli
Iel: '#app' ,
data: (),
methods: ()
}};
二、父传子
在这个 html 中的 script 中加入
，var coml ={template: "#tmpl'}这个东西，在到外面添加（代码如下：）
代码：
<template id "tmpl">
<div>
<h1>这是子元素是/hi></div>
</template>
在 vue 中去定义一下，把这个添加到 vue 中 components：{com_1}，最后在到 div 中去添加<comq>，在保存，再到网页里面去看一下（图片如下：）
三、子传父
通过 components 注入一个 com1的词组线，然后在 vm 选项中是没有数据的，在父组件中加入数据（代码如下：）
代码：
//创建vue 实例，得到viewModelvar vm= new vue ({
el: '#app ',
data:T {
msg: '这是父组件中的数据，爸爸有10o块钱，my son，你要不'},
methods: {，components: {com1
});
如果子属性想要父属性的数据，就要在 com1中去拿到，
想用的话，还需要在 script 中的 com1下面添加这个
props:[ 'parentmsg ']。
这样就继承到了 parentmsg，想用的话直接调用就行。
四、父子属性
把子属性的数据传给父属性，就要在 script 中的 com1中添加 data。
代码如下：
Data(){
return {
msg:'做一个孝顺的孩子，给爸爸一些钱去挥霍把!'
}
},
在到 vm 中传入参数，代码如下：
代码：
var vm =new vue(i
el: '#app' ,
data:{
msg:'这是父组件中的数据，爸爸有100块钱，my son，你要不'}，
methods: {
getMsgEormson (dath)i
methods: {
getMsgFormSon (data){
this.msgFornSon = datal
-
}
} ,
components : {
com1
}
在到 div 中传入一些数据，代码如下：
<h1>这是子元素--- {i i parentmsg }}</h1>
<input type="button" value="向父组件传递消息” eclick="sendiMsg">
-
最后保存代码，在网页里面显示输出（结果如下：）
