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 >
      <h1 >{{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,
      });
    }
  },

View Code

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>