Vue相关

[dale426]

有深度的vue生命周期示意图

---

原文链接

[dale426]

又一种vue组件通信方式

---

vue 2.6.0 新增方法 Vue.observable()； 使用方法，点这里

用来处理大量表单数据、或者简易的vuex功能；

[dale426]

Vue .sync修饰符与$emit(update:xxx)写法问题

1. 使用.sync修饰符,即

   // this.$emit('update:father-num',100);  //无效
   this.$emit('update:fatherNum',100); //有效  注意fatherNum驼峰
   //......
   <father v-bind:father-num.sync="test"></father>

2. 不使用.sync 即

     this.$emit('update:father-num',100);  //有效
     //this.$emit('update:fatherNum',100); // 无效
   
     //......
    <father v-bind:father-num="test" v-on:update:father-num="test=$event" ></father>

[dale426]

路由钩子

beforeRouteEnter(to, from, next) {
    // 从细则页面和合同跳回不需要再展示阅读
    next(vm => {
        vm.routerFrom = from.fullPath !== '/';
    });
},
data() {
    return { 
        routerFrom: false
    }
}

[dale426]

vue通过$emit触发事件

❌ 错误方法

this.$emit('userCallback');

✅ 正确示范

// 子组件
this.$emit('user-callback');

// 父组件
<my-components @user-callback="myEvents"></my-components>

总结：函数名需要全部小写，否则无法触发事件；

[dale426]

vue中data为什么要用函数返回一个对象？

当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

[dale426]

Vue中的 $event

第一种

<button @click="handler">按钮</button>

当Vue中的事件绑定的函数不写括号时， 会自动注入 $event, 即原生的事件对象[MouseEvent]；

hadler(e) {
    console.log(e)  // Object  MouseEvent 如下图
}

---

第二种

<button @click="handler($event)">按钮</button>

当写括号时，可以用$event当做形参，在函数中也是接受到默认的event对象

hadler(e) {
    console.log(e)  // Object  MouseEvent 如下图
}

---

第三种

当button是一个自定义组件时；

<my-button @my-click="handler($event, 'mytags')">按钮</my-button>

this.$emit('my-click', 'param1') $event仍然是作为一个形参，接收子组件emit 上来的第一个参数；

hadler(ops1， ops2) {
console.log(ops1， ops2)  //  输出 params1, mytags
}

[dale426]

VUE插槽

---

1. 具名插槽 在指定的位置输出我们的子元素，这时候具名插槽就排上了用场。 // 组件

   <template>
   <div>
   <button>组件</button>
   <slot name="myslot"></slot>
   {/* name是插槽的名称 */}
   </div>
   </template>

// 调用时

<my-components>
<div>
  <p>调用组件</p>
  <div slot="myslot">
    这里面的内容会放在插槽中
  </div>
</div>
</my-components>

---

2.作用域插槽 作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值。 //书写组件时

title 是组件内部的变量

<template>
<li>
<slot name='footer' :aa="title">
</slot>
</li>
</template>

//组件调用

 <ul>
   <myli :title="val.title"
   >
   <template v-slot:footer="message">
       <div>{{message.aa}}</div>
   </template>
   </myli>
 </ul>

这里需要注意的是message是所有你绑定属性的集合，也就是你写的：aa=“title”会当做message的属性来实现。当然这里message可以换做其它的名称。

v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射。

[dale426]

Vue中根据数组的变化执行计算属性Computer

data() {
  return {
    myarr: [true, true]
  }
},
methods: {
  change() {
    this.myarr[0] = false // 改变数组的值时，computed无法监听到， 页面视图也不会更新

    // 使用vue 的方法向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
    this.$set(this.myarr, 0, false); 
  }
},
computed: {
  isError() {
    return this.myarr.some(item => item)
  }
},
watch() {
  isError(newValue, oldValue) {
    this.$emit('input', newValue)
  }
}

知识点

Vue.set( target, propertyName/index, value )

参数：

• {Object | Array} target
• {string | number} propertyName/index
• {any} value

返回值：设置的值。