系列文章導航
1 單文件組件的好處
2 單文件組件的運行場景hbuilderx工具
一下兩種方式創建的項目才允許使用單文件組件：
1）方式1：Vue項目(含vue-cli)
2）方式2：uni-app項目
3 組件的定義與使用
3.1 組件的定義語法規范
<template>
組件模板內容
</template>
<script>
export default {
name: "組件名稱",
//組件內部數據
data(){
return{
變量名:變量值
}
},
//組件對外公開屬性
props: {
屬性名稱: {
type: String,//屬性類型
value: "值"
},
......
},
//組件生命周期
created:function(e){
},
//組件內部方法
methods: {
test(){
}
}
}
</script>
<style>
組件樣式
</style>
3.2 組件的使用語法規范
1、引用依賴的組件
import 組件名稱 from "../../components/組件名.vue"; 2、導出本組件時聲明依賴的組件 export default{ components:{ 組件名稱 }, } 3、在試圖模板中使用組件 <組件名稱 組件屬性="對應的值"></組件名稱>
4 vue項目單文件組件代碼實例
4.1 文件結構
4.2 組件定義myComponent.vue
<template>
<!-- 組件模板內容 -->
<div>
<slot name="begin" v-bind:cValue="cValue" :user="user">begin默認內容</slot><button>子組件<slot>center默認內容</slot></button>
<slot name="end">end默認內容</slot>
</div>
</template>
<script>
export default {
// 組件名稱
name: "myComponent",
// 組件數據
data: function() {
return {
cValue: "內部變量",
user:{
firstName:'wang',
lastName:'zhirui'
}
}
},
props:[],
//組件生命周期
created: function(e) {
},
//組件內部方法
methods: {
}
}
</script>
<style>
</style>
4.3 組件使用app.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
<br />
<!-- 使用組件時 綁定組件對外公開的事件的事件處理方法-->
<my-component><template v-slot="begin">父給begin的內容{{pValue}}}</template>默認填充內容</my-component>
<br>
<!-- 通過v-slot:插糟名="公開分享數據的引用變量名" -->
<my-component><template v-slot:[cname]="slotProps">{{slotProps.cValue}}-{{slotProps.user.firstName}}</template></my-component>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import myComponent from '@/components/myComponent.vue'
export default {
name: 'app',
data() {
return {
title: 'Hello',
pValue: "外部變量",
cname: "begin"
}
},
components: {
HelloWorld,
myComponent
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
4.4 運行效果
5 uni-app單文件組件代碼實例
5.1 文件結構
5.2 組件定義myComponent.vue
<template>
<!-- 組件模板內容，單個外層標記 -->
<div>
<slot name="begin" v-bind:cValue="cValue" :user="user">begin默認內容</slot><button>子組件<slot>center默認內容</slot></button>
<slot name="end">end默認內容</slot>
</div>
</template>
<script>
export default {
// 組件名稱
name: "myComponent",
// 組件數據
data() {
return {
cValue: "內部變量",
user:{
firstName:'wang',
lastName:'zhirui'
}
}
},
props:[],
//組件生命周期
created: function(e) {
},
//組件內部方法
methods: {
}
}
</script>
<style>
</style>
5.3 組件的使用index.vue
<template>
<view class="content">
<!-- 使用組件時 綁定組件對外公開的事件的事件處理方法-->
<my-component><template v-slot="begin">父給begin的內容{{pValue}}}</template>默認填充內容</my-component>
<br>
<!-- 通過v-slot:插糟名="公開分享數據的引用變量名" -->
<my-component><template v-slot:[cname]="slotProps">{{slotProps.cValue}}-{{slotProps.user.firstName}}</template></my-component>
</view>
</template>
<script>
// 引入組件
import myComponent from '@/components/myComponent.vue'
export default {
data() {
return {
title: 'Hello',
pValue:"外部變量",
cname:"begin"
}
},
// 定義可以使用的組件
components: {
myComponent
},
// uni-app 頁面生命周期函數
onLoad() {
},
// 頁面方法
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
5.4 運行效果
