2、父子组件
1）在components目录下新建sub文件夹，用于存放一下可以复用的子组件。比如新建一个Confirm.vue组件
（2）在父组件中引入子组件
引入：import Confirm from '../sub/Confirm'
注册：在<script></script>标签内的 name代码块后面加上 components: {Confirm}
使用：在<template></template>内加上<confirm></confirm>
完整代码：在First.vue中
<template>
<div class="first-app">
{{msg}}
<confirm></confirm>
</div>
</template>
<script>
import Confirm from '../sub/Confirm.vue'
export default {
name: 'First',
components: { Confirm },
data () {
return {
msg: 'welcome to my first test'
}
}
}
</script>
<style>
</style>
ps:在div中输入confirm，在import的时候自动补全就生成了，但是格式会乱，可能会自动出现{}错乱的问题，调整一下检查一下就好了；
3）父子组件通信
子组件：
父组件：
<template>
<div class="first-app">
{{msg}}
<confirm :text="注册" @message="getMessage"></confirm>
</div>
</template>
<script>
import Confirm from '../sub/Confirm.vue'
export default {
name: 'First',
components: { Confirm },
data () {
return {
msg: 'welcome to my first test'
}
},
methods: {
getMessage (val) {
alert(val)
}
}
}
</script>
<style>
</style>
效果图：
ps：当你run起来项目之后，注意地址信息，如果渲染不出来，可能是因为地址没有定位到准确的页面捏~
3、使用路由搭建简单页面
1、在views下创建一个second.vue文件
2、写
<p><router-link to="/second">to second page</router-link></p>
运行效果：
点击后：
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。