Vue2 知识点总结

1、.sync修饰符

<Child :money.sync="total" /> //等同于下方代码片段
<Child :money="total" v-on:update:money = "total = $event"  />

总结：vue 修饰符sync的功能是：当一个子组件需要改变了一个 prop 的值时，会通知其父组件进行同步的修改。

2、“+”操作

“+”，操作，不管三七二十一，将接口得到的长串数字转化为数字保平安。

const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);

3、provide和inject依赖注入

vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题。在provide中指定要传递给子孙组件的数据，子孙组件通过inject注入祖父组件传递过来的数据。

使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问祖先组件的数据

父组件:

export default {
	  data () {
	    return {
	      isShow: false,
	      isRouterAlive: true
	  },
	// 父组件中返回要传给下级的数据  可以使函数，也可以是data中的数据
	  provide () {
	    return {
	      reload: this.reload
	      isShow:this.isShow
	    }
	  },
	   methods: {
		    reload () {
		    
		    }
		  }
	}

子孙组件

export default {
	//引用vue reload方法 内容 isShow
	  inject: ['reload','isShow'],
	  components: {
	    PopupAssign
	  },
	methods: {
	    async successHandle () {
	      this.reload()
	    }
	  }
}

4、Vue 函数式组件 functional

<script>
import prodConfig from './DetailConfig'
import btnConfig from './BtnConfig'
import Detail from '@/views/modules/Detail'
export default {
  functional: true,
  render(createElement, context) {
    context.data.attrs = { ...(context.data.attrs ?? {}), prodConfig, btnConfig }
    return createElement(Detail, context.data)
  }
}
</script>

5、路由传递参数params/query

跳转路由的几种方式：

  1、声明式： 
	  1) 根据路由路径（/home/sort/detail）跳转 <router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">点击查看子页面</router-link>
	  2) 根据路由名称（detail）跳转 <router-link :to="{name: 'detail', params:{id: 'abc'}}">点击查看子页面</router-link>
                :to=""  可以实现绑定动态的 路由 和 参数
 
  2、编程式： 
	  1） this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})      
	  2） this.$router.push({name: 'detail',params:{id: 'abc'}})
 
    备注： params 和 query 传参的区别：
           1、params传参时  参数不会出现在url的路径上面， 但是刷新页面时param里面的数据会消失
           2、query传参时   参数出现在url的路径上面， 刷新页面时query里面的数据不变

5、inheritAttrs

vue官网对于inheritAttrs的属性解释：默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。

如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。

//父组件
<template>
  <div class="parent">
    <child-component aaa="1111"></child-component>
  </div>
</template>

<script>
import ChildComponent from './child-component'
export default {
  components: {
    ChildComponent
  }
}
</script>

//子组件
<template>
  <div class="child">子组件</div>
</template>
<script>
export default {
  inheritAttrs: true,
  mounted() {
    console.log('this.$attrs', this.$attrs)
    // 当inheritAttrs为true时：输出this.$attrs， {a: "1111"}
    // 当inheritAttrs为false时：输输出this.$attrs， {a: "1111"}
    // 所以可以看出来$attrs值与inheritAttrs无关
  }
}
</script>

结果：

• inheritAttrs为true的情况
  
• inheritAttrs为false的情况
  

6、$attrs和$listeners

1、$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
2、$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

//父组件
 <my-button type="success" round autofocus @click="handleClick" @todo="handle">11</my-button>

//子组件
 <template>
  <el-button v-bind="customizedAttrs" v-on="$listeners" @click="todo">
    <slot />
  </el-button>
</template>

<script>
export default {
  name: 'MyButton',
  inheritAttrs: false,
  computed: {
    customizedAttrs() {
      return {
        size: 'medium',
        // 支持传过来的size覆盖默认的size
        ...this.$attrs
      }
    }
  },
  methods: {
    todo() {
      this.$emit('todo')
    }
  }
}
</script>

7、vm.

vue的实例属性$options是用来获取定义在data外的数据和方法的。

8、split().reverse().join()用法

split()： 方法用于把一个字符串分割成字符串数组。
reverse()： 方法用于颠倒数组中元素的顺序。
join() ：方法也就是把数组中的所有元素以字符串的形式输出

例子：
输入 'Hello Vue.js!'
输出 '!sj.euV olleH'

9、动态指令

1、动态 attribute 名

<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>
<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>

export default {
  data () {
    return { key: "class" }
  }
}

2、动态事件

<!-- 动态事件 (2.6.0+) -->
<button v-on:[eventName]="doThis"></button>
<!-- 动态事件缩写 (2.6.0+) -->
<button @[eventName]="doThis"></button>

export default {
  data () {
    return { eventName: "focus" }
  }
}

3、动态的插槽名

<!-- 动态的插槽名 (2.6.0+) -->
<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>
<!-- 动态的插槽名缩写 (2.6.0+) -->
<base-layout>
  <template #[dynamicSlotName]>
    ...
  </template>
</base-layout>

10、v-model.lazy

v-model.lazy是失焦后绑定数据，这个就相当于以往对输入框进行事件绑定一样，当失焦后操作什么。这里配合watch进行监听比@blur="change()"更直观明了。

<template>
    <div>
        <input v-model.lazy='green'/>
        <span>{{green}}</span>
    </div>
</template>

<script>
export default {
  data() {
    return {
      green: ''
    }
  },
  watch: {
    green(newval, oldval) {
      console.log('newval', newval)
      console.log('oldval', oldval)
    }
  }

}
</script>