如何你没有下面几个问题, 那这篇文章真的是一无是处.
组件的创建与引用
父组件与子组件的交互
组件与组件间的交互
0.1 谈谈组件
我一开始是对组件有着深深的误解, 我个人直接把 web 中的组件强行等于安卓中的 button 啊, listview 啊, 其实是错的. 组件的划分, 并没有那么严格, 一个按钮可以是一个组件, 页面的导航栏可以是一个组件. 最好是一个页面中, 只包含尽可能少的大组件, 在大组件中, 尽可以包含功能相近的小组件.
导航栏可以是一个大组件, 内容可以是一个大组件, 导航栏里又可以包含 logo, 具体栏目的导航.
上面都是我个人的理解.
1 组件的创建与引用
这里只谈单文件系统, 一个. vue 就是一个组件.
在单文件系统中, 一个 *.vue 文件包含 script,style,template 标签. 那么, 如何在 a.vue 中, 用 b.vue 中的组件呢?
import view from 'xxx/xxx/xxx.vue'
import Vue from 'vue';
Vue.component('你喜欢的标签名',view)
这样在 a 的 template 中, 就可以这么使用 b 了
<template>
< 你喜欢的标签名 ></ 你喜欢的标签名 >
<template>
然后呢, 由此, 就会扯出一坨别的问题
那怎么才能向子组件里传数据啊?
那收到父组件的数据, 子组件里要怎么用呢?
那完成了一些操作, 子组件要怎么报告给父组件呢?
答: 我也不知道 见第二章.
2. 组件与组件间的交互
那怎么才能向子组件里传数据啊? prop
那收到父组件的数据, 子组件里要怎么用呢? 插槽
那完成了一些操作, 子组件要怎么报告给父组件呢? 如果只是简单的, 用自定义事情, 复杂的, 可以使用第三章提到的 vuex.
其实官方文档都有这些的使用, 地址点我.
但是我这个更是读完后的一个重点啊! 我觉得我理一下更方便自己的理解与使用~
2.1 prop
实在是觉得 官网的中文教程 写的好, 花 10 分钟就可以看完了, 真的不想单纯的复制过来水, 没意思. 就再补充下单文件下的定义吧:
<template>
<span>{{ message }}</span>
</template>
<script>
export default {
// 声明 props
props: ['message'],
// 就像 data 一样, prop 也可以在模板中使用
}
<style >
</style>
2.2 插槽
补充一下: 怎么理解插槽.
如果子组件要接收父组件的内容显示, 要放在哪里显示呢?
子组件要怎么使用呢?
于是就引出了这个标签, 见 b.vue, 它用作接收父组件中的数据
如 a.vue(发数据, 和 slot 无关)
<template>
<div>
<h1 > 我是父组件的标题 </h1>
<my-component>
<p > 这是一些初始内容 </p>
<p > 这是更多的初始内容 </p>
</my-component>
</div>
</template>
b.vue(收数据)
<div>
<h2 > 我是子组件的标题 </h2>
<slot>
只有在没有要分发的内容时才会显示.
</slot>
</div>
最后就显示成了:
<div>
<h1 > 我是父组件的标题 </h1>
<div>
<h2 > 我是子组件的标题 </h2>
<p > 这是一些初始内容 </p>
<p > 这是更多的初始内容 </p>
</div>
</div>
slot 还可以指定名字来接收数据. 具名插槽
更详细内容看官网
2.3 事件
使用自定义事件做一些子组件与父组件的交互
on(eventName) 监听事件
emit(eventName) 触发事件
我把官网例子搞过来切割一下, 并做点详细的解释吧~
父组件的 template:
<div id="counter-event-example">
<p>{{ total }}</p>
<!--increment 是事件的名字, 而引号后面的 incrementTotal 是函数名 -->
<!-- button-counter 就是一个子组件 -->
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
可以看出, 父组件订阅了 increment 这个事件, 那么自然, 字组件就一定触发了 increment 这个事件.
下面还是父组件的 js:
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function() {
this.total += 1
}
}
子组件的 template:
<button v-on:click="incrementCounter">{{ counter }}</button>
子组件的 js:
data: function() {
return {
counter: 0
}
},
methods: {
incrementCounter: function() {
this.counter += 1 this.$emit('increment')
}
}
从代码中可以看出, 子组件的 click 可以触发 incrementcounter 函数, 在这个函数里, 又发射了 increment 事件.
更多细节请参考官网
3 组件与组件之间的通迅
如果:
a.vue 中的子组件想与 b.vue 中的子组件的通迅
a.vue 想与 b.vue 中的子组件的通迅
a.vue 中的子组件想与 b.vue 通迅
a.vue 的子组件的子组件想与 b.vue 的子组件通迅
......
想想就烦啊, 这个时候, 就要全局的 vuex, 就是状态管理~
这个坑值得另开一篇文章讲, 等一个二.
来源: http://www.jianshu.com/p/404cffba899b