vue2笔记

@vue/cli 和 vue-cli区别：

创建一个项目 | Vue CLI  官网

npm 包名发生改变，vue-cli为2.x版本时vue的脚手架，@vue/cli为3.x版本的脚手架。

vue-cli为创建2.x版本样式的脚手架

@vue/cli为创建3.x版本样式的脚手架，可以按3.0版本创建vue2和vue3

使用@vue/cli 创建2.x版本样式，使用下面方法

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

$attrs 和 $listeners的使用

• 功能： 用于实现多层组件通信（多于父子组件通信层级）
• 用法：
  v-bind=$attrs 和 v-on=$listeners

$attrs 属性绑定
$attrs 是一个包含父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外) 的对象。
当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，
通过 v-bind="$attrs" 传入内部组件

$listeners 事件监听器
$listeners 包含了父作用域中 (不含 .native 修饰器的) v-on 事件监听器。
通过 v-on="$listeners" 传入内部组件

<!-- AttrGrandFather.vue -->
<template>
  <div>
    GrandFather:
    <attrFather :msg1="msg1" :msg2="msg2" @click="handleClick" />
  </div>
</template>

<script>
import AttrFather from './AttrFather.vue'
export default {
  components: { AttrFather },
  data() {
    return {
      msg1: 'msg1',
      msg2: 'msg2'
    }
  },
  methods: {
    handleClick() {
      console.log('trriger click')
    }
  }
}
</script>

<!-- AttrFather.vue -->
<template>
  <div>
    <div @click="handleFatherClick">Father: {{ msg1 }}</div>
    <attr-son v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

<script>
import AttrSon from './AttrSon.vue'
export default {
  components: { AttrSon },
  props: ['msg1'],
  methods: {
    handleFatherClick() {
      console.log('father click')
      this.$emit('click')
    }
  }
}
</script>

<template>
  <div @click="handleSonClick">AttrSon: {{ msg1 }}{{ msg2 }}</div>
</template>

<script>
export default {
  props: ['msg1', 'msg2'],
  methods: {
    handleSonClick() {
      console.log('AttrSon click')
      this.$emit('click')
    }
  }
}
</script>

向孙子（GrandSon）传递了msg1 和 msg2，

然而msg1被父亲接走了，所以孙子收不到 。

v-bind="$attrs"其他效果 

爷：
<attrFather :msg1="msg1" :msg2="msg2" @click="handleClick"/>

父：
<div>Father: {{ msg1 }}</div>
<attr-son v-bind="$attrs" />

子：
{{ msg1 }}{{ msg2 }}
props: ['msg1', 'msg2']

显示结果：
父
子

------------------------------------

爷：
<attrFather :msg1="msg1" :msg2="msg2" @click="handleClick"/>

父：
<div>Father: {{ msg1 }}</div>
<attr-son v-bind="$attrs" />

子：
{{ msg1 }}{{ msg2 }}
props: ['msg1', 'msg2']

显示结果：
父
子 msg1 msg2 

------------------------------------

爷：
<attrFather :msg1="msg1" :msg2="msg2" @click="handleClick"/>

父：
<div>Father: {{ msg1 }}</div>
<attr-son v-bind="$attrs" />
props: ['msg1']

子：
{{ msg1 }}{{ msg2 }}
props: ['msg1', 'msg2']

显示结果：
父 msg1
子 msg2

 v-on="$listeners"其他效果 

爷
<attrFather @click="handleClick"/>
    handleClick() {
      console.log('trriger click')
    }

父
<attr-son v-on="$listeners"/>
    handleFatherClick() {
      console.log('father click')
      this.$emit('click')
    }

子
<div @click="handleSonClick">AttrSon</div>
    handleSonClick() {
      console.log('son click')
      this.$emit('click')
    }

点击子，显示
son click
trriger click

---------------------------------------------

爷
<attrFather @click="handleClick"/>
    handleClick() {
      console.log('trriger click')
    }

父
<attr-son @click="handleFatherClick"/>
    handleFatherClick() {
      console.log('father click')
      this.$emit('click')
    }

子
<div @click="handleSonClick">AttrSon</div>
    handleSonClick() {
      console.log('son click')
      this.$emit('click')
    }

点击子，显示
son click
father click
trriger click

---------------------------------------------

爷
<attrFather @click="handleClick"/>
    handleClick() {
      console.log('trriger click')
    }

父
<attr-son @click="handleFatherClick" v-on="$listeners"/>
    handleFatherClick() {
      console.log('father click')
      this.$emit('click')
    }

子
<div @click="handleSonClick">AttrSon</div>
    handleSonClick() {
      console.log('son click')
      this.$emit('click')
    }

点击子，显示
son click
father click
trriger click
trriger click