vue组件基础

自定义组件

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。组件还可以复用

一个组件的 data 选项必须是一个函数因此每个实例可以维护一份被返回对象的独立的拷贝：如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例：

<template>
<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>
</template>

<script>
import Vue from 'vue'
Vue.component('ButtonCounter',{
    data(){
        return{
            count:0
        }
    },
    template:'<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    
})
export default {
    
    methods:{
    
    }
    
    
}
</script>

<style>

</style>

prop组件传值

组件传值