vue项目中遇到的问题总结

主要内容

• 类名的用法
• computed计算属性 与methods
• watch介绍和场景
• 组件的封装和传值

类名的用法

控件的类名复用 根据不同的类名更换背景图片等

• 情况1：固定定义的类名

<span class="icon”>

<span class="icon icon2”>

在style中
.icon {
      ...

    background-size: 100% 100%;

    bg-image('../../assets/images/hot');

     &.icon2 {

        bg-image('../../assets/images/advant');

        background-size: 100% 100%;

    }
}

• 情况2.根据情况判断来确定类名

//调用
<div class="topContentXy" :class="wrapClass”>

//<script>中
computed: {

  wrapClass: function(){
    if(this.productType === 'aa'){
        return 'topContentSl'
    }else if(this.productType === 'bb'){
        return 'topContentDy'
    }else{
        return 'topContentXy'
       }
}

在style中

image.png

computed计算属性 与methods

在类名的介绍中我们可以看到用到了computed计算属性的方式，computed可以以绑定的形式实现更多我们想要的操作。
computed计算属性 将当前内容与包含的内容绑定

image.png

当this.checked 或者 this.telNumber
变化的时候会引起classBtnMethod重新计算 将这三个绑定到一起起到动态处理的效果
与methods方法的区别：

• 加载方式的不同
  以methods进行加载的方式。如果调用了，是每次进入页面都要执行该方法，但是在利用实时信息时，比如显示当前进入页面的时间，必须用methods方式
• 二者的调用方式不一样
  写法上computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用，必须加().

watch介绍和场景

• 1.来监听状态的变化
  监听系统的某一个设置的状态值
  下图可以看到一个是 设置的具体的状态值 以及computed中方法的监听

  
  image.png
  

  根据打印结果可以看到，使用watch方法可以监听到某个值的改变 以及computed中方法的改变

• 2.监听路由的变化
  在同一个详情页中点击相关新闻跳转到同样的详情页，但是可能会存在路由主信息不变以及
  created() {}不会再次加载 因此可能导致界面内容点击不会改变

  
  image.png
  

  监听路由变化 并且触发数据的加载信息实现页面的刷新

  
  image.png

组件的封装和传值

传参数的组件和不传参数的组件组

• 1.不传参数的组件
  组件内部同其他.vue文件一样 可以进行逻辑处理网络请求等操作，引用的时候导入文件 加入组件
  例如 引入一个轮播图组件

  
  image.png

这样就完成了一个组件的引入使用

• 2.需要传参数的组件的引入
  比如在使用头部导航栏的组件时我们想要根据不同的页面传入不同的标题，就需要使用
  props 属性
  引用时传递参数

  
  image.png

在组件中接收的处理方式如下

image.png

实现props中的内容与模板的内容的绑定。
文档中说：props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值

后记

最近在写vue中遇到的一些总结算是，接下来写一下在vue中一些常用控件的用法。