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()可以实现子组件调用父组件的方法达到传值的效果