10.ref属性、Prop、mixins、scoped、nextTick

1.ref 属性被用来给元素或子组件注册引用信息（id的替代者）。

• 1-1.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象。

2.ref属性使用方式：

• 2-1.打标识：< h1 ref=“xxx”>…或< School ref=“xxx”>。
• 2-2.获取组件或Dom节点：this.$refs.xxx。

3.props配置项：

• 3-1.功能：让组件接收外部传过来的数据。
• 3-2.接收数据：
  • ①只接收：props:[‘name’]
  • ②限制类型：props:{name:String}
  • ③限制类型、限制必要性、指定默认值：

props:{
  name:{
    type: String, //类型
    required: true, //必要性
    default: '老王' //默认值
  }
}

• 3-3.props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
• 3-4.当子组件接收 props中传递的对象数据并设置默认的值，当不传递数据对象的某个属性，那么这个数据对象的属性默认值即不会生效。

// 父组件传数据 
<NavParent :type="{
  showHandleCol: false,
  handleType: [],
  isTagData: false,
}">
</NavParent>
// 子组件接收
props: {
  type: Object,
  default: () => {
    return {
      tableFixedHeader: [],
      showHandleCol: false,
      handleType: [],
      isTagData: false,
    }
  }
},
mounted() {
  console.log(this.type) 
  // {
  //   showHandleCol: false,
  //   handleType: [],
  //   isTagData: false
  // }
}

• 3-5.处理1-4出现的问题是因为 props 默认值的作用是只在没有传参时才会被读取，并不会为你的参数对象补齐属性。使用计算属性处理：

// 父组件传数据
<NavParent :type="{
  showHandleCol: false,
  handleType: [],
  isTagData: false,
}">
</NavParent>
// 子组件接收
props: {
  type: Object,
  default: () => {
    return {}
  }
},
mounted() {
  console.log(this.params)
  // {
  //   tableFixedHeader: [],
  //   showHandleCol: false,
  //   handleType: [],
  //   isTagData: false
  // }
},
computed: {
  params() {
    return Object.assign({
      tableFixedHeader: [],
      showHandleCol: false,
      handleType: [],
      isTagData: false,
    }, this.type);
  }
},

• 3-6.$attrs：实例上的属性，父组件传递给子组件的数据。如果子组件没有声明 props 接收的话，传递的数据就会在这个属性上可以获取，声明了 props 接收的话，属性 $attrs 中就不会存储父组件传递的数据。
  • ①父组件传递子组件不在 props 中声明接收：
  • ②父组件传递子组件在 props 中声明接收：

// 父组件传数据
<NavParent :type="{
  showHandleCol: false,
  handleType: [],
  isTagData: false,
}">
</NavParent>
// 子组件接收
props: {}
mounted() {
  console.log(this.$attrs)
  // {
  //   type: {
  //     showHandleCol: false,
  //     handleType: [],
  //     isTagData: false
  //   }
  // }
},

// 父组件传数据
<NavParent :type="{
  showHandleCol: false,
  handleType: [],
  isTagData: false,
}">
</NavParent>
// 子组件接收
props: {
  type: {
    type: Object,
    default: () => { }
  }
}
mounted() {
  console.log(this.$attrs) // {}
},

4.mixins ：可以把多个组件共用的配置提取成一个混入对象。

• 4-1.定义混入：

{
  data(){....},
  methods:{....}
  ....
}

• 4-2.使用混入：
  • ①全局混入：Vue.mixin(xxx)
  • ②局部混入：mixins:[‘xxx’]
• 4-3.值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
• 4-4.同名钩子函数（生命周期函数）将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

5.组件拥有scoped属性时候，css 样式只能用于当前的 Vue 组件。

• 5-1.可以使组件的样式不相互污染。如果一个项目的所有 style 标签都加上了scoped属性，相当于实现了样式的模块化。

• 5-2.写法：< style scoped>< /style>。

• 5-3.原理：通过 PostCSS 给一个组件中的所有 dom 添加了一个独一无二的动态属性，给css选择器额外添加一个对应的属性选择器，来选择组件中的 dom，这种做法使得样式只作用于含有该属性的 dom 元素(组件内部的dom)。

  • ①给HTML的 dom 节点添加一个不重复的 data 属性(例如: data-v-5558831a)来唯一标识这个 dom 元素。
  • ②每个 css 选择器的末尾(编译后生成的css语句)加一个当前组件的 data 属性选择器(例如：[data-v-5558831a])来私有化样式。

• 5-4.优缺点：

  • ①优点:让样式在局部生效，防止冲突。
  • ②.缺点：
    • α：由于只是通过属性限制，类还是原来的类，所以在其他地方对类设置样式还是可以造成污染。
    • β：添加了属性选择器，对于CSS选择器的权重加重了。
    • γ：外层组件包裹子组件，会给子组件的根节点添加data属性。在外层组件中无法修改子组件中除了根节点以外的节点的样式。比如子组件中有box类，在父节点中设置样式，会被编译为.box[data-v-x]的形式，但是box类所在的节点上没有添加data属性，因此无法修改样式。可以使用/deep/或者>>>穿透CSS，这样外层组件设置的box类编译后的就为[data-v-x] .box了，就可以进行修改。
  • ③解决方案：可以使用CSS Module：CSS Module没有添加唯一属性，而是通过修改类名限制作用域。这样类发生了变化，在其他地方设置样式无法造成污染，也没有使CSS选择器的权重增加。

6.nextTick：在下次DOM更新循环结束之后执行延迟回调。

• 6-1.语法：this.$nextTick(回调函数)。
• 6-2.作用：在下一次 DOM 更新结束后执行其指定的回调。
• 6-3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。