关闭

vue.js的一个消息组件实例

时间: 2019-01-17阅读: 1161标签: 组件
<template>
  <div v-show="show" :class="`alert alert-${type} alert-dismissible`">
    <button @click="close" type="button" class="close"><span>×</span></button>
    {{ msg }}
  </div>
</template>


v-show 是一个条件渲染指令,它只切换元素 css 属性的 display,这里当 show 值为 true 时,我们就显示该元素。

<script>
export default {
  name: ‘Message‘,
  props: {
    // 是否显示消息框
    show: {
      type: Boolean,
      default: false
    },
    // 消息框的类型
    type: {
      type: String,
      default: ‘success‘
    },
    // 消息
    msg: {
      type: String,
      default: ‘‘
    }
  },
  watch: {
    show(value) {
      if (value) {
        this.$nextTick(() => {
          this.$el.scrollIntoView(true)
        })
      }
    }
  },
  methods: {
    close() {
      this.$emit(‘update:show‘, false)
    }
  }
}
</script>


props 是用来传递数据的,我们需要在子组件用 props 选项声明它预期的数据,上面的代码中我们声明了 3 个属性,并为其指定了 type 类型和 default 默认值,这样我们就能在父组件上传递这些值了,就像下面的代码一样

<Message :show.sync="msgShow" :type="msgType" :msg="msg"/>


type 可以是以下的类型:

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array
  • Symbol

关于侦听器:

watch: {
  show(value) {
    if (value) {
      this.$nextTick(() => {
        this.$el.scrollIntoView(true)
      })
    }
  }
}


watch 选项提供了一个方法来响应数据的变化,在上面的代码中,我们需要监听 show 的新值 value,完整的传参是 show(val, oldVal),val 是新值,oldVal 是旧值。当新值返回 true 时,我们将当前元素滚动到可视区域的顶部。

关闭事件:

close() {
  this.$emit(‘update:show‘, false)
}


$emit 用于触发当前实例上的事件,其第一个参数是事件名称,后面还可以附加若干参数。当点击关闭按钮时,我们触发一个 ‘update:show‘ 的事件,并附带一个参数 false,用来关闭消息提示。(为什么事件名称是 ‘update:show‘,我们稍后结合 props 进行讲解。)

我们可以在组件模板内使用组件定义的 props,但我们不应该直接修改 props。要在组件内更新 props 选项的 show 值,需要显式地触发一个更新事件:

close() {
  // 可以触发一个事件来更新 show
  this.$emit(‘update:show‘, false)

  // 不可以直接修改 show,这会导致 vue 在控制台发出错误警告
  this.show = false
}

 

props 的绑定默认是单向的,我们要在组件内部更新 show 值,需要在父组件上添加 .sync 修饰符,以创建『双向绑定』:

<Message :show.sync="msgShow"/>


上面的代码会被 Vue 扩展为:

<Message :show="msgShow" @update:show="val => msgShow = val" />


因为父组件有 update:show 事件监听,所以我们能在组件内部使用 $emit 来关闭消息提示:

close() {
  this.$emit(‘update:show‘, false)
}
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1832

关闭

父组件从vuex获取数据给子组件传值延迟问题

做项目的时候发现如果子组件在页面比较靠上,子组件渲染的时候父组件还未取到值,导致子组件取不到数据

可靠React组件设计的7个准则之SRP

我喜欢React组件式开发方式。你可以将复杂的用户界面分割为一个个组件,利用组件的可重用性和抽象的DOM操作。基于组件的开发是高效的:一个复杂的系统是由专门的、易于管理的组件构建的。然而,只有设计良好的组件才能确保组合和复用的好处

将多个属性传递给 Vue 组件的几种方式

所有使用基于组件的体系结构(如Vue和React)的开发人员都知道,创建可重用组件是很困难的,而且大多数情况下,最终会通过传入大量的属性,以便从外部更容易地控制和自定义组件。这并不坏,但是传递大量属性确实会变得有点麻烦和丑陋。

开发一个高质量的前端组件,这些姿势一定要知道

NPM 无论从知名度、模块数量、社区的话题数量来看,都算得上是一骑绝尘,将其他语言的模块仓库远远甩在了后面。NPM 的生态既已如此成熟,按说开发者对于 NPM 包的发布和维护应该非常熟悉才是

React Native 实现城市选择组件

很多 App 都有城市选择的功能,今天带大家编写一个城市选择组件。下面是这个组件的效果图。从上图中可以看出,我们将所有城市按照字母区分块,右边是字母索引。通过点击右边的字母可以跳转到相对应的块

vue中8种组件通信方式

vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢?首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式

使用vue.js的动态组件模板

组件并不总是具有相同的结构。有时需要管理许多不同的状态(注:指的是根据不同状态显示不同组件)。异步加载组件对此操作很有帮助。在 Scrumpy 中组件用于提醒、评论和附件等多个地方。

使用Typescript装饰器来劫持React组件

装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。 装饰器使用 @expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入。

漫谈受控与非受控组件

以上是 React 官网对受控组件与非受控组件的一次解释,大学刚刚毕业时候,看到这一段, 实在有些难以接受,在我看来,既然已经选择使用了 React ,就应该完全彻底的使用受控组件

最简单的vue消息提示全局组件

实现功能:自定义文本:自定义类型(默认,消息,成功,警告,危险);自定义过渡时间;使用vue-cli3.0生成项目,toast全局组件编写

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!