Vue杂项

ref的使用

一般情况下，我们可以通过 props down, events up 来进行父子组件之间的通信，同时也可以使用 $refs ( 注意是: refs，不是ref )来访问子组件
原理：可以看成是给子组件添加了一个 id
用法：

// ------- html 部分 ----
<div id="app-6">
  <h1>我是父组件的标题</h1>
  // 给 子组件c-child 添加 ref
  <c-child ref="myChild">
  </c-child>
</div>

<template id="child">
  <div>
    <h2>我是子组件的标题</h2>
    <slot>显示slot内容</slot>
  </div>
</template>
 
//----- js 部分----
Vue.component("c-child", {
   template: "#child",
  data: function() {
    return {
      text: 'abc',
      number: 12
    }
  }
});

var app6 = new Vue({
   el: "#app-6"
});

// 可以通过如下方式访问到子组件， 
var child = app6.$refs.myChild;    // 这样便访问到了子组件

注意:

• 当ref 和 v-for 一起使用时，ref是一个数组，包含相应的子组件。
• $refs只在组件渲染完成后才填充，并且它是非响应式的。它仅仅是作为访问子组件的应急方案，同时，要避免在计算属性和模板中使用它

参考：子组件索引

组件的命名

推荐 的命名方式：

• 声明组件时使用：PascalCase的方式
  如：

  Vue.component('MyComponent', {})
  

  也就是说组件名称中每个单词都首字母大写
• 在html调用组件时使用：kebab-case的方式
  也就是用 “ - ” 分割每个单词
  如：

  <my-component></my-component>
  

对低开销的静态组件使用 v-once

当组件当中有大量的静态内容时，可以考虑使用v-once将内容缓存起来，如下：

Vue.component('once', {
  template:'
    <div v-once> \
      <h1>Terms of Service</h1>\
      ... a lot of static content ...\
    </div>',
});

vue的点击事件传递值和事件

<button @click.stop = "switchArticle($event, index)">点击</button>

switchArticle(e, index) {
  console.log(e);  // 打印出事件信息
  console.log(index);  // 打印出index信息
}