vue：父子组件通信

页面增加展示文字

1、进入demo-project项目的src\components目录下新建views目录，并新建First.vue文件

2、进入router目录下的index.js并配置路由路径：

3、编辑First.vue文件内容：
注意：
(1)template 写 html，script写 js，style写样式；
(2)一个组件下只能有一个的div；
(3)数据要写在return里。

4、在浏览器地址栏输入：http://localhost:8080/#/first

父子组件通信

1、在components目录下新建sub文件夹，用于存放子组件。
2、在sub文件夹下新建Confirm.vue组件，并在父组件First.vue中引入子组件Confirm.vue：
在script中引入
在script的name代码块后引入
在template中使用

3、编辑Confirm.vue文件：

<template>
  <div class="confirm-button">
    <button @click="getButtonClick">{{text || '确认'}}}</button>
  </div>

</template>

<script>
export default {
  name: 'Confirm',
  props: ['text'],
  data () {
    return {
      msg: true
    }
  },
  methods: {
    getButtonClick () {
      this.$emit('message', this.msg)
    }
  }
}
</script>

<style scoped>

</style>

4、编辑父组件First.vue，与子组件通信：

<template>
  <div class="first-app">
    {{msg}}
    <confirm text="注册" @message="getMessage"></confirm>
  </div>
</template>

<script>
import Confirm from '../sub/Confirm'
export default {
  name: 'First',
  components: {Confirm},
  data () {
    return {
      msg: 'Welcome to FirstApp'
    }
  },
  methods: {
    getMessage (val) {
      alert(val)
    }
  }
}
</script>

<style scoped>

</style>

5、看点击效果：