key

**作用：**在虚拟DOM中的节点添加 ID

**缘故：**在数组遍历时可能出现相同DOM节点的元素 , 容易出现数据混乱的问题 , 因此需要独有的key进行排列调整 , 这一前提key必须具有唯一性

<ul>
	<li v-for="item in items" :key="item.id">...</li>
</ul>

应用场景：

强制替换元素/组件而不是重复使用：

• 完整地触发组件的生命周期钩子
• 触发过渡

<!-- 当 text 发生改变时 , <span> 总是会被替换而不是被修改 , 因此会触发过渡 .  -->
<transition>
      <span :key="text">{{ text }}</span>
</transition>

ref

**作用：**获取被 ref属性 的标签 DOM对象（该标签在Vue容器范围内

值： DOM对象获取的引用

注意

• 当 ref 和 v-for 共存时 , 得到的 DOM对象 将会是一个包含对应数据源子组件数组
• $ref 只会在标签渲染后生效 , 并非是响应式的 , 因此竟可能的避免在 模板/算法 中使用
• $ref 也可获取组件标签中的 DOM对象 信息

**步骤： **

1. 为需要获取 DOM对象的标签添加 ref属性 并赋予值
2. 获取 DOM对象 可直接通过以下方式获取 ==this.$refs.<ref属性值>==

示例

<div id="app">
   <son ref="myMsg"></son>
   <button @click="log">log</button>
</div>
....
<template id="son">
   <div>
       <p>我是组件</p>
       <p>{{msg}}</p>
   </div>
</template>
<script>
   
   Vue.component("son", {
       template: "#son",
       data() {
           return{
               msg:"hello"
           }
       },
       methods:{
           say() {
               console.log("load... Say()")
           }
       }
   })
   
   new Vue({
       el: "#app",
       data: {
           msg: "hello"
       },
       methods: {
           log() {
               console.log(this.$refs.myMsg)
               console.log(this.$refs.myMsg.msg)
               console.log(this.$refs.myMsg.say)
           }
       }
   });
</script>

slot

**作用：**标记往哪个具名插槽中插入子组件内容

示例：跳转示例

slot-scope

**作用：**接收插槽传递的数据

示例：跳转示例