Vue组件通信实践记录,vue实现点击图片放大效果

Javascript语言用于编码的函数,一共有三个,最古老的一个就是escape()。虽然这个函数现在已经不提倡使用了,但是由于历史原因,很多地方还在使用它,所以有必要先从它讲起。

组件通信

本文实例为大家分享了vue点击图片放大展示的具体代码,供大家参考,具体内容如下

escape 和 unescape

几乎所有的mvvm框架中都要涉及组件通信的功能(吐槽一下knockout,毕竟是鼻祖就先不说它了)。而且目前的前端形式来看,组件化是一个项目的基础。所以选好一个合适的框架后,随着组件的不断增加,业务的复杂度提升,组件之间的通信变得尤为重要。

1.建立子组件,来实现图片方法功能: BigImg.vue

实际上,escape()不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值。比如”春节”的返回结果是%u6625%u8282,也就是说在Unicode字符集中,”春”是第6625个(十六进制)字符,”节”是第8282个(十六进制)字符。

实践方法

<template>
  <!-- 过渡动画 -->
  <transition name="fade">
     <div class="img-view" @click="bigImg">
       <!-- 遮罩层 -->
       <div class="img-layer"></div>
       <div class="img">
         <img :src="imgSrc">
       </div>
    </div>
  </transition>
</template>
<script>
  export default {
    props: ['imgSrc'],//接受图片地址
    methods: {
      bigImg() {
      // 发送事件
        this.$emit('clickit')
      }
    }
  }
</script>
<style scoped>
  /*动画*/
  .fade-enter-active,
  .fade-leave-active {
    transition: all .2s linear;
    transform: translate3D(0, 0, 0);
  }
  .fade-enter,
  .fade-leave-active {
    transform: translate3D(100%, 0, 0);
  }

  /* bigimg */
  .img-view {
    position: inherit;
    width: 100%;
    height: 100%;
  }
  /*遮罩层样式*/
  .img-view .img-layer {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  /*不限制图片大小,实现居中*/
  .img-view .img img {
    max-width: 100%;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1000;
  }
</style>

它的具体规则是,除了ASCII字母、数字、标点符号”@ * _ + – .
/”以外,对其他所有字符进行编码。在u0000到u00ff之间的符号被转成%xx的形式,其余符号被转成%uxxxx的形式。对应的解码函数是unescape()。

由于更换新的框架,我们的项目由Avalon更新成Vue.但是为了兼容以前的业务代码,不能直接使用vue的标准实践方式,我还是拿过来后封装了一个vue的class,具体业务里面不影响使用,封装的过程之后写出来再聊吧,下面来总结一下最近用到的通信实践方法。

2.在父类中使用子组件:

还有两个地方需要注意。

1.父组件是通过props传递数据给子组件

<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div class="contents">
    <div class="group">
      <div class="special">
        
      </div>
      
      <div class="group_img">
        <!-- 放大图片 -->
        <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
   
        <div class="text" v-text="pagedata.article"></div>
        <img id="smallImg" :src="pagedata.imgurl" @click="clickImg($event)">
      </div>
    </div>
  </div>
</template>

<script>
import BigImg from '../../index/moduleStyles/BigImg.vue';
export default {
  data () {
    return {
      showImg:false,
      imgSrc: ''
    }
  },
  props: ['pagedata'],
  computed: {},
  components: { 'big-img':BigImg},
  methods: {
    clickImg(e) {
      this.showImg = true;
      // 获取当前图片地址
      this.imgSrc = e.currentTarget.src;
    },
    viewImg(){
      this.showImg = false;
    },
  },
  watch: {},
}
</script>
<style>
</style>

首先,无论网页的原始编码是什么,一旦被Javascript编码,就都变为unicode字符。也就是说,Javascipt函数的输入和输出,默认都是Unicode字符。这一点对下面两个函数也适用。

vmodel 中包含了两个子组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

其次,escape()不对”+”编码。但是我们知道,网页在提交表单的时候,如果有空格,则会被转化为+字符。服务器处理数据的时候,会把+号处理成空格。所以,使用的时候要小心。

<div class="w-base">
  <book-component v-bind:bookdata="book"></book-component>
</div>

<div class="base">
  <node-component v-bind:catalog="catalog" ></node-component>
</div>

您可能感兴趣的文章:

  • vue.js+Echarts开发图表放大缩小功能实例

例如:

在上面这段代码中我们可以看到,定义了两个子组件,并且使用指定v-bind指令传递了数据,子组件会接收到传递的数据。

编码:

Vue.component('book-component', {
 template: tpl,//可以传进来子组件的模板文件
 props: ['book'],
 data: function () {
  return { myBook: this.bookdata }
 }
})
escape('http://www.baidu.com?name=zhang@xiao@jie&order=1')
结果:"http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1"

escape('张')
结果:"%u5F20"

建议接收到单向的props数据后,定义一个局部变量来初始化使用。

解码:

2.父组件与子组件之间通信的其他方式

unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")
结果:"http://www.baidu.com?name=zhang@xiao@jie&order=1"

unescape("%u5F20")
结果:"张"

vue中给实例提供了三个我们可用的API $children 和 $refs 以及 $parent 。

encodeURI 和
decodeURI

$children:当前实例的直接子组件。需要注意 $children
并不保证顺序,也不是响应式的。

encodeURI()是Javascript中真正用来对URL编码的函数。

$refs:包含了当前实例所有拥有 ref 注册的子组件的对象.

它着眼于对整个URL进行编码,因此除了常见的符号以外,对其他一些在网址中有特殊含义的符号”;
/ ? : @ & = + $ ,
#”,也不进行编码。编码后,它输出符号的utf-8形式,并且在每个字节前加上%。

$parent : 当前实例的父实例。

发表评论

电子邮件地址不会被公开。 必填项已用*标注