vue之自定义组件的写法与用法

三个技能,父组件 —> 子组件传值(props)、子组件 —> 父组件传值($emit)、以及插槽(slot);对于一个独立的组件来说,props是用来为组件内部注入核心的内容;$emit用来使这个独立的组件通过一些逻辑来融入其他组件中。举个具体点的例子,假如你要做一辆车,车轮是要封装的一个独立组件,props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹,图案等;而$emit的作用则是让这些轮子能够和整辆车完美契合的运作起来。

(1)使用props可以实现父子组件之间的传值
(2)使用this.$emit()可是实现子组件调用父组件的方法

一.在commponents文件创建组件文件

二.组件代码(写法)

index.vue

<template>
    <div class="cusdealed">
        <div class="submited" v-if="showStatus==1">
            <div class="submitRes">
                <img class="resImg" src="../../common/img/repectSubmit.png" alt="">
            </div>
            <div class="submitTip tipwidth">该单据已经提交过了,不用重复提交哦!</div>
        </div>

         <div class="submited" v-if="showStatus==2">
            <div class="submitRes">
                <img class="resImg" src="../../common/img/invalid.png" alt="">
            </div>
            <div class="submitTip">单据已失效,不能扫单入库!</div>
        </div>

        <div class="submited" v-if="showStatus==3">
            <div class="submitRes">
                <img class="resImg" src="../../common/img/invalid.png" alt="">
            </div>
            <div class="submitTip">找不到该单据,不能扫单入库!</div>
        </div>

    </div>
</template>
<script type="text/javascript" src="./logic.js"></script>
<style lang="less" scoped>
    @import './style.css';
</style>

style.less

//样式文件
@import '../../common/less/px2rem.less';
@import '../../common/less/base.less';

.cusdealed {
  .submited {
    .submitRes {
      .px2rem(150);
      width: @px2rem;
      height: @px2rem;
    }

    .submitRes {
      .px2rem(227);
      margin: @px2rem auto 0;

      .resImg {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .submitTip {
    .px2rem(58);
    //   height: @px2rem;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: @px2rem;
    }
    .submitTip{
        .px2rem(32);
        font-size: @px2rem;
    }
    .tipwidth{
        .px2rem(384);
        width: @px2rem;
    }
    .submitTip{
        .px2rem(50);
        margin: @px2rem auto 0;
    }
  }
}

logic.js

//逻辑文件
import { Spinner } from 'vux'

export default {
    name: 'cusDealing',
    data() {
        return {
          showStatus:1
        }
    },
    components: {
        Spinner,
    },
    props: {
        // showStatus: Number
      },
      computed: {

      },
      watch: {
        showStatus(val) {
          console.log(val, 'showStatus---')
          return val;
        }
      },
    methods: {

    },
    mounted() {

    }
}
三.用法

引入组件


页面使用
html:

  <!-- 处理完弹窗 -->
    <div class="dealed" :style="'padding-top:'+marginTop+'px;height:'+bodyheight+'px;'" v-if="dealStatus==2">
        <div class="dealedContent">
            <Cusdealed :showStatus="showStatus"></Cusdealed>
            <div class="Iknow" @click="Iknow">我知道了</div>
        </div>
    </div>

js:


效果

原文地址:https://www.cnblogs.com/jessie-xian/p/11572189.html

时间: 2024-10-28 00:59:41

vue之自定义组件的写法与用法的相关文章

vue中自定义组件(插件)

vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: 1.首先建一个自定义组件的文件夹,比如叫loading,里面有一个index.js,还有一个自定义组件loading.vue,在这个loading.vue里面就是这个组件的具体的内容,比如: <template> <div> loading.............. </div

四、vue基础--自定义组件

1.语法:Vue.component("组件名字",{data,template}),代码如下: a. data: 必须是一个函数,有一个返回值.和vue里面的使用方法一样 b. template: 用来标示这个组件的渲染后的具体的代码 <div id='app'> <button-count></button-count> <button-count></button-count> <button-count>&

vue的自定义组件和组件传值

<div id="app"> <div>{{pmessage}}</div> //父组件 <child :message="pmessage"></child>//打开一个通道 绑定message </div> Vue.component('child',{ props:['message'], //使用props 来接收信息 template:'<h1>{{message}}<

vue 封装自定义组件

先说说组件的结构 最好单独放一个文件夹,有依赖的话装依赖 Sjld.vue 内容 <template id="sjld"> <label > <select v-model="selected" prop="selected" > <option v-for="option in sheng" :value="option.id" :label="opti

vue.js自定义组件directives

自定义指令:以v开头,如:v-mybind. <input v-mybind /> directives:{ mybind:{ bind:function (el) { el.value = "this is mybind-bind" } } } 这时页面初始化时,input中会显示this is mybind-bind. 通过directives注册自定义指令mybind,每一个自定义指令中又提供若干钩子,如示例中的bind, bind的作用是定义一个在绑定时执行一次的初

Vue.js 自定义组件封装实录——基于现有控件的二次封装(以计时器为例)

在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着不重复发明轮子的原则).于是我就在 GitHub 上找寻.确实找到了不少,但是与需求之间的差距还比较大.从零开始写又不太现实(时间摆在那里,加之自己的前端也是刚学,还没有从零开始手撸一个控件的能力),所以在已有组件的基础上进行二次封装便成了一个比较可行的方法(几乎也是唯一解).遂在 npm 上以 c

vue基础----自定义组件directive ,bind,update,insert

<div id="app"> <input type="text" v-limit.3="msg" v-focus> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> Vue.directive("focus",{ /* 方法一*/ /* bin

微信小程序 发现之旅(二)—— 自定义组件

组件化的项目开发中,组件应当划分为三个层次:组件.模块.页面 微信小程序已经为开发者封装好了基础组件,页面文件(pages)也有了详细的规定 而模块就需要自行开发,并且要和页面文件区分开,这就涉及到自定义组件 一.基本用法 在根目录下创建一个 components 目录,用于存放自定义组件 组件也是由 json.wxml.wxss.js 四个文件组成 其中 wxml 部分没有什么特殊的地方,和页面的写法一致 wxss 也是只对组件生效,而且 app.wxss 中的样式也不会对自定义组件生效 最关

Vue.js自定义指令的用法与实例

市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动.自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的. 比如谷歌图片的加载做得非常优雅,在图片未完成加载前,用随机的背景色占位,图片加载完成后才直接渲染出来.用自定义指令可以非常方便的实现这个功能. 效果: 自定义