Vue3中v-if与v-for、多事件处理器即案件修饰符、$attrs、$root和$parent

---

1. v-if与v-for及动态属性ref的使用

在 vue3 中，当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级。

下面是 v-for 结合 ref 数组的使用：

<template>
  <div>
    <ul>
      <li ref="lis" v-for="item of names" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      names: ['张三', '李四', '乐乐']
    }
  },
  mounted() {
    // 打印ref数组
    console.log(this.$refs.lis)
  }
}
</script>

<style lang="scss" scoped></style>

vue3中的 ref 如果写成动态属性，则可以传一个函数：

<template>
  <div>
    <ul>
      <!-- vue3中的ref如果写成，动态属性，则可以传一个函数 -->
      <li :ref="addNamesRef" v-for="item of names" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      names: ['张三', '李四', '乐乐'],
      namesRefs: []
    }
  },
  mounted() {
    console.log(this.namesRefs)
  },
  methods: {
    addNamesRef(el) {
      el && this.namesRefs.push(el)
    }
  }
}
</script>

<style lang="scss" scoped></style>

2. 多事件处理器及按键修饰符

多事件处理器：

事件处理程序中可以有多个方法，这些方法由逗号运算符分隔。

<template>
  <div>
    <!-- 现在vue3中可以给一个元素同时绑定多个事件来处理 -->
    <button @click="handleClick1($event, 'click1'), handleClick2()">click</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    handleClick1(evt, msg) {
      console.log(msg)
    },
    handleClick2() {
      console.log('click2')
    }
  }
}
</script>

<style lang="scss" scoped></style>

按键修饰符：

<template>
  <div>
    <!-- 事件修饰符，直接写对应的按位值(alt+m键) -->
    <input type="text" @keyup.alt.m="click" />
    <!-- 向上(按上键) -->
    <input type="text" @keyup.arrow-up="click" />
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    click() {
      console.log(111)
    }
  }
}
</script>

<style lang="scss" scoped></style>

3. $attrs包含class和style

Vue3中，$attrs 现在包含了所有传递给组件的 attribute，包括 class 和 style。

<template>
  <!-- 虽然vue3中可以不用顶层元素包裹，但是在进行属性继承的时候，需要顶层元素进行包裹，否则会报警告 -->
  <div :class="$attrs.class">
    <h3>child组件 -- {{ title }}</h3>
  </div>
  <!-- 如果不用顶层元素包裹的话，就需要一个个去指定样式 -->
  <div :style="$attrs.style">aaaa</div>
</template>

<script>
export default {
  // 属性是否穿透过来，默认为true，即不继承父属性，默认就可以，一般不去设置
  // inheritAttrs: false,

  // 简写
  // props: ['title'],

  // 验证写法
  props: {
    title: {
      type: String,
      default: '默认值'
    }
  },
  setup() {
    return {}
  }
}
</script>

<style lang="scss" scoped></style>

4. $root和$parent

$children 实例 property 已从 Vue 3.0 中移除，不再支持。但$root 和$parent 属性还是可以使用的。

<template>
  <h3>child组件</h3>
</template>

<script>
export default {
  setup() {
    return {}
  },
  mounted() {
    // 它永远指向createApp中的App组件
    console.log('root', this.$root)
    // 指向它的父组件
    console.log('parent', this.$parent)
  }
}
</script>

<style lang="scss" scoped>

</style>