vue自定義組件

理解

組件：簡言之就是將一些共性的內容做一個封裝，方便以后重復使用。

在vue中組件包括：全局組件和局部組件。組件都具有復用性，自定義的組件擁有vue的全部特性，包括生命周期、template、data、methods、script、style等。

組件的命名：

（1）組件名稱官方規定使用小寫字母且用‘-’連接

（2）組件可以使用駝峰命名法，但是在使用時必須大寫轉小寫，且用‘-’連接，因為html不識別大小寫，全部會被認為小寫。

 

一、局部組件

通過一個對象的方式直接定義，在vue實例中注冊后使用

對象中包含一個template屬性，表示組件使用的模板html。另外在組件中定義的data必須是一個function，需要一個對象定義的返回值

<div id="app">
<abc></abc>
</div>

<script>
    var c={
    template:`<div>
    <p>我是用來展示組件嵌套的</p>
             </div>`
     }

var h={
    template:`<div>
    <h5>hello world</h5>
    <button @click='clickHandle'>{{count}}</button>
    <c/>
       </div>`,
data(){
    return{
    count:0
     }
 },
compoents:{
    c,
   },
methods:{
     clickHandle(){

    this.count+=1;
        }
   }
}

var app=new vue({
    el:'#app',
    components:{
        abc:h,
      }
})
</script>

二、全局組件

參數一：表示組件id

參數二：表示組件的配置信息

全局組建定義完成后，可以直接使用

<div id="app">
<mr></mr>
</div>

<script>
     Vue.component('mr',{
 7      temple:`<div>我是一個全局組件</div>`})
var app=new vue({
 9        el:'#app',
 10 })
 11 </script>

另一種寫法

在模板中，有且只有一個根節點用來包裹所有的節點

三、組件傳值-子傳父

<div id="app">
  //通過綁定一個事件進行事件監聽
  <h5 >接收到的子組件傳來的值:{{str}}</h5>
  <abc @countadd='countAdd'></abc>
</div>

<script>
var h={
    template:`<div>
    <h5>hello world</h5>
    <button @click='clickHandle'>{{count}}</button>
    </div>`,
data(){
   return{
     count:0
   }
},
compoents:{
   c,
},
methods:{
  clickHandle(){
  this.count+=1;
this.$emit('countadd',this.count)//通過$emit來進行事件派發
     }
  }
}

var app=new vue({
     el:'#app',
     components:{
     abc:h,
  },
data:{
     str:'',
},
methods:{
     countAdd(v){
     this.str=v;
      }
  }
})
</script>

四、組件傳值-父傳子

父組件向子組件傳值通過props

<div id="app">
//通過綁定一個事件進行事件監聽
    <h5 >接收到的子組件傳來的值:{{str}}</h5>
    <abc step="3"></abc>
</div>

<script>
var h={
 template:`<div>
 <h5>hello world</h5>
 <button @click='clickHandle'>{{count}}</button>
</div>`,
data(){
 return{
 count:0
  }
 },
props:['step'],//子組件接收父組件
compoents:{
 c,
},
methods:{
 clickHandle(){
 this.count+=this.step*1;//將接收到的數組隱式轉化為number型
     }
  }
}
//定義組件
var app=new vue({
 el:'#app',
 components:{
 abc:h,
  },
 data:{
 str:'',
 },
 methods:{
 countAdd(v){
 this.str=v;
 }
 }
})
</script>

 

結論：（1）使用props可以實現父子組件之間的傳值（2）使用this.$emit()可以實現子組件調用父組件的方法達到傳值的效果