Vue杂项

ref的使用

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

// ------- html 部分 ----

  
我是父组件的标题
  // 给 子组件c-child 添加 ref
  
  



 
//----- 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的方式
  也就是用 “ - ” 分割每个单词
  如：

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

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

Vue.component('once', {
  template:'
    
 \
      
Terms of Service
\
      ... a lot of static content ...\
    
',
});

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

点击

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