Vue.js入门（13）

序言

 

大家先回顾一下vue2.0中子父之间互相传值的方式是什么样子的

子向父传值：this.$emit(“name”,“值”); 父接收：@name:name （自定义方法接收）；

父向子传值：:name=‘222’ 子接收：props:[‘name’] 接收

大家有没有想过其他的办法呢？今天咱们要讲的主角上场了。

this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }！

vue的$on,$emit

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

 

 

为什么vue组件的属性，有的需要加冒号“:”，有的不用?

加冒号的，属性绑定，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串字面量！

<el-radio :label="true">打开</el-radio>

<el-radio :label="false">关闭</el-radio>

输出：true 或 false 值是Boolean类型

<el-radio label="true">打开</el-radio>

<el-radio label="false">关闭</el-radio>

输出：”true" 或 “false” 值是String类型

$nextTick是什么？

作用是：等你页面刷新完之后，再执行回调函数中的方法

<div id="app">
      <h1 id="myh">{{msg}}</h1>
      <button @click="change">点击</button>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello'
        },
        methods: {
          change() {

            this.msg = 'itcast'
            // console.log(document.getElementById('myh').innerText); // 如果直接这样打印，打印出来的结果不是我们想要的itcast，而是hello，因为this.msg = ‘itcast’ 它是异步的
            this.$nextTick(() => {
              console.log(document.getElementById('myh').innerText)
            })
          }
        }
      })
    </script>

---

vue如何获取dom

先给标签设置一个ref值，再通过this.$refs.domName获取，例如：

<div ref="test"></div>

const dom = this.$refs.test

addEventListener、removeEventListener

mounted() {
    // 注册滚动事件，在滚动的时候如果cascader打开，就关闭它
    const ele = document.getElementsByClassName('main')[0];
    if (ele) {
      ele.addEventListener('scroll', this.listenScroll, {
        passive: true,
      });
    }
  },
  beforeDestroy() {
    // 移除滚动事件监听
    const ele = document.getElementsByClassName('main')[0];
    if (ele) {
      ele.removeEventListener('scroll', this.listenScroll, {
        passive: true,
      });
    }
  },

vue中的ref和$refs

ref有三种用法：

1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

https://www.cnblogs.com/xumqfaith/p/7743387.html

 <div class="search-form clearfix" @keydown="bindEnter($event)">

// 绑定enter事件

    bindEnter(e) {

      this.$enterSearch(e, this.search);

    }

cookie

 if (this.$cookies.get("groupId")) {

        this.$cookies.remove("groupId");

      }

 _this.$cookies.set("groupId", groupId, 31 * 24 * 60 * 60);

              _this.$cookies.set("hotelId", hotelId, 31 * 24 * 60 * 60)

 

// 保存酒店名称

            const localSrorage = window.localStorage;

            localSrorage.hotelName = hotelName;

filters

 <td>{{ item.star | format_star }}</td>

filters: {
    format_star(str) {
      switch (str) {
        case "FiveStar":
          return "五星";
          break;
        case "QuasiFiveStar":
          return "准五星";
          break;
        case "FourStar":
          return "四星";
          break;
        case "QuasiFourStar":
          return "准四星";
          break;
        case "ThreeStar":
          return "三星";
          break;
        case "QuasiThreeStar":
          return "准三星";
          break;
        case "Economical":
          return "经济型";
          break;
        default:
          return "请选择";
      }
    }

async

async function searchPermissions() {

scope

const { row } = scope;

Vue.nextTick()用于延迟执行一段代码。

vue 中的const {XXX } =this 的作用效果

样例1：
const { xxx } = this.state;
上面的写法是es6的写法，其实就相当于：

const xxx = this.state.xxx
样例2：

const {comment,index,deleteComment} = this
上面的这句话是一个简写，最终的含义相当于
const comment = this.comment
const index = this.index
const deleteComment = this.deleteComment

vue /deep/深度选择器

我们知道在vue组件中样式中添加 scoped，那么这个样式就会被设定为只影响这个vue组件内的内容 假定某个vue组件又引用了element-ui 亦或者其他UI组件，此时 UI不满意element-ui的样式，想要在这个页面微调下element-ui的页面。但不能影响全局element-ui组件样式。那么我们就需要使用/deep/ 来穿透scoped。

js中const,var,let区别

1.const定义的变量不可以修改，而且必须初始化。

2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

3.let是块级作用域，函数内部使用let定义后，对函数外部无影响。

资料