关闭

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

时间: 2019-01-17阅读: 1288标签: 组件
<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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

react之如何写一个管理自有状态的自定义组件

函数组件类似一个纯函数,接受外部传入的参数,生成并返回一个React元素(伪DOM)。例如,如下,Greeting作为一个组件,接受传入的参数name,并返回一个内容已填充的p标签。

在 Vue.js 中使用无状态组件

在本文中,你将了解功能组件,并了解如何在 Vue 中使用工作流中的无状态组件。你的PC需要以下内容:安装 Node.js version 10.x 或以上版本。可以通过在终端中运行以下命令来验证你是否安装了此版本的Node.js:

Vue组件、自定义属性、自定义事件

一个vue文件就是一个组件。组件将html标签/css样式/对应JS打包成一个整体,也可以理解钻进一个具有样式和特效的自定义标签。自定义属性、使用自定义属性

react中使用Fragments

在官方文档中,原文是,“React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。”,意思就是你在写组件的时候,外面再套一个Fragments。类似于vue中的template

一个简单的slider滑块组件

要实现这样的效果我们有很多种方法,比如直接使用<input type=range>修改样式即可,也可用下面的这种方式修改样式。那如何以组件的形式生成一个简单的滑块呢?

vue的provide / inject 有什么用?

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。provide/inject平时用的比较少,多数用于开发组件,但某些情况下还是很好用的。

深入理解React中的setState

组件的状态是一种保存、处理和使用给定组件内部信息的方法,并允许你实现其自身的逻辑。状态本身其实是JavaScript中一个简单的对象(Plain Old Java[Script] Object),并且改变它是使组件重新进行渲染的几种方法之一

less组件库主题定制; 给项目设置常用样式common.less

一般组件库的样式编写都会为使用者设计一些主题样式更换方案,我这里根据自己对主流组件库antd和iview的研究,总结出这两类:iview引入主题样式,复写,antd通过less-loader的modifyVars注入主题变量

Node.js之react.js组件-Props应用

render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码(个人理解:将组件进行函数化,通过调用组件名实现,组件的利用,以元素的形式调用,并渲染画面),具有 render prop 的组件接受一个函数

vue封装组件调用时绑定click事件

我们在开发中会封装许多的通用的组件,那么如何封装好一个组件时,在调用的时候绑定click事件呢?

点击更多...

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