开发者学堂课程【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中加入
，<script>var coml ={template: "#tmpl'}这个东西，在到外面添加（代码如下：）
代码：
<template id "tmpl"> <div> <h1>这是子元素是/hi></div> </template>
在vue中去定义一下，把这个添加到vue中components：{com_1}，最后在到div中去添加<comq></com1>，在保存，再到网页里面去看一下（图片如下：）
三、子传父
通过components注入一个com1的词组线，然后在vm选项中是没有数据的，在父组件中加入数据（代码如下：）
代码：
//创建vue 实例，得到viewModelvar vm= new vue ({ el: '#app ', data:T { msg: '这是父组件中的数据，爸爸有10o块钱，my son，你要不'}, methods: {，components: {com1 });
如果子属性想要父属性的数据，就要在com1中去拿到，
代码：
<coml v-bind:parentmsg="msg"></ 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"> -
最后保存代码，在网页里面显示输出（结果如下：）
