码迷,mamicode.com
首页 > 其他好文 > 详细

vue 组件的书写

时间:2018-01-22 17:28:23      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:lan   add   .com   style   color   ring   fonts   image   ima   

    简单的来说是 vue组件最核心的就是props和自定义函数,来实现组件的开发

   最简单的一个组件 子组件如下:

<template>
    <div class="bgClass">
      <h3>
        {{name}}
      </h3>
    </div>
</template>

<script>
    export default {
      name: "bg-div",
      props:{
          name:{
            type:String,
            default:‘‘
          }
      }
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
  @import "../common/css/_variate";
  .bgClass{
    margin: 0.2rem 0;
    h3{
      font-size: @mainFontSize;
      line-height: 0.48rem;
      text-align: left;
      padding-left: 0.1rem;
      background: url("../common/image/rectangle.png") no-repeat left;
      background-size: auto 100%;
    }
  }
</style>

父组件 :技术分享图片

vue 组件的书写

标签:lan   add   .com   style   color   ring   fonts   image   ima   

原文地址:https://www.cnblogs.com/lbjmm/p/8329603.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!