一：組件及交互

1、什么是組件？

組件是可復(fù)用的 Vue 實例，且?guī)в幸粋€名字：在這個例子中是 。我們可以在一個通過 new Vue 創(chuàng)建的 Vue 根實例中，把這個組件作為自定義元素來使用：

聲明組件

// 定義一個名為 button-counter 的新組件
Vue.component('button-counter', {data: function () {return {count: 0}},template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

使用組件（把組件當(dāng)作自定義元素）

<div id="components-demo"><button-counter></button-counter>
</div>

引入組件

new Vue({ el: '#components-demo' })

2、父向子傳值

Prop 是你可以在組件上注冊的一些自定義 attribute。當(dāng)一個值傳遞給一個 prop attribute 的時候，它就變成了那個組件實例的一個 property。為了給博文組件傳遞一個標(biāo)題，我們可以用一個 props 選項將其包含在該組件可接受的 prop 列表中：

組件內(nèi)部聲明prop

Vue.component('blog-post', {props: ['title'],template: '<h3>{{ title }}</h3>'
})

父組件里調(diào)用，并給prop賦值，傳遞到組件內(nèi)部

<blog-post title="My journey with Vue"></blog-post>

3、父組件監(jiān)聽子組件事件

其實就是通過在父組件聲明方法，并綁定在子組件上。以子組件內(nèi)部觸發(fā)方法的形式，向父組件傳參，實現(xiàn)子向父傳值的效果。如下

父組件中聲明方法，并綁定在子組件上

<template>
<lineChart v-on:getQuotaVal="getQuotaVal"></lineChart>
</template>
<script>methods: {// 本事件用來監(jiān)聽折線圖子組件，從子組件拿到指標(biāo)數(shù)據(jù)getQuotaVal:function(obj){this.lineDateType = obj.lineDateType; // 這樣父組件就拿到了，子組件的obj數(shù)據(jù)}},
</script>

子組件觸發(fā)方法

that.val = {};
that.$emit('getQuotaVal',that.val); // 將子組件的數(shù)據(jù)發(fā)送過去；

二：vue中import和require

三：組件拋出內(nèi)容

在每個vue組件中都有export default來拋出對象，供別的組件使用

這個對象的屬性中默認(rèn)有生命周期鉤子如mounted、created，組件自身相關(guān)name、components、data、methods

還有watch、filters、props等