父子组件使用
在工程目录/src下创建component文件夹，并在component文件夹下创建一个 firstcomponent.vue并写仿照 App.vue 的格式写一个组件。
<template>
<div id="firstcomponent">
<h1>I am a title</h1>
<a> {{ author }} </a>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
author: "第一个子组件"
}
}
}
</script>
<style>
</style>
然后在 App.vue 使用组件
第一步，引入。在<script></script>标签内的第一行写:
import firstcomponent from './component/firstcomponent.vue'
第二步，注册。在<script></script>标签内的 data 代码块后面加上 components: { firstcomponent }
export default {
data () {
return {
msg: 'Hello Vue!'
}
},
components: { firstcomponent }
}
第三步，使用。在<template></template>内加上<firstcomponent></firstcomponent>
<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
<firstcomponent></firstcomponent>
</div>
</template>
全局组件
- 使用更为方便，不需要声明，直接用
- 在main.js中引入一次并使用
Vue.component('组件名', 组件对象) - 所有的组件通过组件名使用
扫一扫
121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
