創(chuàng)建組件
在文件夾下(如components里)創(chuàng)建vue文件，寫入代碼模板如下
<template>
//這里寫組件的模板
</template>
<script>
export default{
//這里聲明組件的默認(rèn)輸出
}
</script>
<style scoped>
//這里寫組件的樣式
</style>
//之前學(xué)的所有的插值表達(dá)式綁定屬性，綁定事件昂利，循環(huán)列表等方法在template里面都可以使用
組件的模板巨税，跟元素必須只有一個
組件里的data必須是函數(shù)
data(){
return {
testData:'我是一個測試數(shù)據(jù)'
}
}
引入組件的方法
1.引入自己書寫的vue文件
import firstCom from"./components/FirstCom";//路徑前加./表示根目錄下
2.在父組件內(nèi)的components里面聲明組件
export default {
name: 'App',
components:{firstCom},
}
3.在父組件的模板內(nèi)直接使用聲明的組件,把組件渲染到頁面中
<div id="app">
<firstCom></firstCom>
</div>
自定義組件
自定義全局組件
Vue.component("zhead",{
template:'<div>{{testData}}</div>',
data:function(){
return {
testData:"我是兒子"
}
},
}
自定義局部組件
new Vue({
el:"#app",
data:{},
//自定義局部組件
components:{
localcom:{
template:'<div @click="onClick">{{localData}}</div>',
data(){
return{
localData:"我是爸爸",
}
}
}
})
