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、看点击效果：
