vue为p标签_[转]Vue组件的引用

89 阅读 0 评论 59 点赞

我是靠谱客的博主高高草丛，这篇文章主要介绍vue为p标签_[转]Vue组件的引用，现在分享给大家，希望可以做个参考。

原文：https://www.jianshu.com/p/bb18f738179f

父子组件使用

在工程目录/src下创建component文件夹，并在component文件夹下创建一个 firstcomponent.vue并写仿照 App.vue 的格式写一个组件。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>

image

然后在 App.vue 使用组件

第一步，引入。在<script></script>标签内的第一行写:

复制代码

1
2
import firstcomponent from './component/firstcomponent.vue'

第二步，注册。在<script></script>标签内的 data 代码块后面加上 components: { firstcomponent }

复制代码

1
2
3
4
5
6
7
8
9
export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  },
  components: { firstcomponent }
}

第三步，使用。在<template></template>内加上<firstcomponent></firstcomponent>

复制代码

1
2
3
4
5
6
7
8
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <firstcomponent></firstcomponent>
  </div>
</template>