Vue创建并使用组件

简介 里面一个组件从创建到使用一般分为三步骤,、引入。、挂载。、使用。在此之前,还有一步,创建组件,文件夹里面新建一个组件,如,默认代码如下:源码:所有的内容必须被根节点包含起来获取数据获取数据引入、挂载并使用,看注释因为我是在里面使用,所以直接修改源码如下:、使用组件、引入组件、挂载组件

Vue里面一个组件从创建到使用一般分为三步骤,

1、引入。

2、挂载。

3、使用。

在此之前,还有一步,创建组件,components文件夹里面新建一个组件,如Home.vue,默认代码如下:


components/Home.vue 源码:

<template>
<!-- 所有的内容必须被根节点包含起来 -->
<div class="home">
<h1>{{title}}</h1>
<button @click="getData()">获取数据</button>
</div>
</template>

<script>
export default {
name: "Home",

data(){
return {
title: 'First Vue Components - My Name is Home',
}
},
methods:{
//获取数据
getData(){

},

},

}
</script>

<style scoped>

</style>


引入、挂载并使用,看注释

因为我是在App.vue里面使用,所以直接修改App.vue源码如下:

<template>
<div id="app">
<!-- 3、使用组件 -->
<v-home>

</v-home>
</div>
</template>

<script>
//1、引入组件
import Home from './components/Home.vue';
export default {
components:{
//2、挂载组件
'v-home': Home,
}
}
</script>

<style>

</style>


刷新浏览器最终结果如下:


 

评论禁用

用户名:

验证码:

Top