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信息
}
