在Hello.vue 中, export default 后面的对象中,添加一个字段props, 它是一个数组, 专门用来接收父组件传递过来的数据. props: ["mesFather"], 这里定义了mesFather 字符串, 和父组件中定义的元素的属性一一对应. 但是我们在父组件,就是在 <hello /> 元素中定义的属性是mes-father， 没有一一对应啊? 这主要是因为，在html 元素中大小写是不敏感的。 如果我们写成<hello mesFather="message from father"></hello>， 里面的mesFather 就会转化成mesfather, 相当于我们向子组件传递了一个mesfather数据， 如果在js 文件中，我们定义 props: ["mesFather"]，我们是接受不到数据的，因为js 是区分大小写的， 只能写成props: ["mesfather"]. 但是在js 文件中，像这种两个单词拼成的数据，我们习惯用驼峰命名法，所以vue 做了一个转化，如果在组件中属性是 - 表示，它 自动会转化成驼峰式。 传进来的数据是mes-father, 转化成mesFather, 我们在js 里面写mesFather, 一一对应，子组件可以接受到组件。 props 属性是和data， methods 属性并列的，属同一级别。 props 属性里面定义的变量，在 子组件中的template 中可以直接使用。
App.vue 的template 更改如下：
<template> <div> <img src="https://www.jb51.net/article/assets/logo.png"> <hello mes-father="message from father"></hello> </div> </template>
Hello.vue组件，这里还是把项目中自带的Hello.vue 清空，自己写，变成如下内容
<template> <div> <p>{{mesFather}}</p> </div> </template> <script> export default { props:['mesFather'] } </script>
这时，在页面中看到 message from father 字样，父元素向子元素传递数据成功。
子组件向父组件传递数据，需要用到自定义事件。 例如，我们在Hello.vue ，写入一个input, 接收用户输入，我们想把用户输入的数据传给父组件。这时，input 需要先绑定一个keypress 事件，获取用户的输入，同时还要发射自定义事件，如valueUp, 父组件只要监听这个自定义事件，就可以知道子组件要向他传递数据了。子组件在发射自定义事件时，还可以携带参数，父组件在监听该事件时，还可以接受参数，参数，就是要传递的数据。
在 Hello.vue template中，添加一个input输入框，给它一个v-model 获取用户的输入，再添加keypress的事件，用于发射事件，传输数据。script 中添加data，定义变量来获取用户的输入，添加methods 来处理keypress事件的处理函数enter, 整个Hello.vue 文件如下
<template> <div> <!-- 添加一个input输入框 添加keypress事件--> <input type="text" v-model="inputValue" @keypress.enter="enter"> <p>{{mesFather}}</p> </div> </template> <script> export default { props:['mesFather'], // 添加data, 用户输入绑定到inputValue变量，从而获取用户输入 data: function () { return { inputValue: '' } }, methods: { enter () { this.$emit("valueUp", this.inputValue) //子组件发射自定义事件valueUp, 并携带要传递给父组件的值， // 如果要传递给父组件很多值，这些值要作为参数依次列出 如 this.$emit('valueUp', this.inputValue, this.mesFather); } } } </script>
在App.vue 中， template中hello 组件绑定一个自定义事件，@valueUp =“receive”, 用于监听子组件发射的事件，再写一个 p 元素，用于展示子组件传递过来的数据，<p>子组件传递过来的数据 {{ childMes }}</p>
相应地，在scrpit中，data 中，定义一个变量childMes, 并在 methods 中，定义一个事件处理函数reciever。整个App.vue修改如下：
<template> <div> <img src="https://www.jb51.net/article/assets/logo.png"> <!-- 添加自定义事件valueUp --> <hello mes-father="message from father" @valueUp="recieve"></hello> <!-- p元素，用于展示子组件传递过来的数据 --> <p>子组件传递过来的数据 {{childMes}}</p> </div> </template> <script> import Hello from './components/Hello' export default { name: 'app', components: { Hello }, // 添加data data: function () { return { childMes:'' } }, // 添加methods，自定义事件valueUp的事件处理函数recieve methods: { recieve: function(mes) { // recieve 事件需要设置参数，这些参数就是子组件传递过来的数据，因此，参数的个数，也要和子元素传递过来的一致。 this.childMes = mes; } } } </script>
这时在input中输入内容，然后按enter键，就以看到子组件传递过来的数据，子组件向父组件传递数据成功。