在Vuejs中, 組件之間的傳參是今天第一次接觸, 之前寫的組件互相之間都是獨立的,
弗敢專也, 必以分人
環境: node.js npm vue-cli 以上安裝請自行百度
一、項目創建
$ vue init webpack
這里需要注意的是“前面的一些項目名稱什么的都可以直接回車，最后三個選項要注意，是代碼檢測”，這個代碼檢測有點煩的地方是要求代碼必須極其規范，我tab符用4個空格都不允許，必須兩個，所以到這里我選擇不用代碼檢測，webpack編譯后不影響使用！
上面的命令會在當前目錄下生成一些文件，這些文件是基於webpack的vue項目模板，省時省力，不用自己去搭建環境（其實是因為我手動搭建的很不規范，有能力的同學自己來）
搭建好了環境，就可以開始碼嘍！
目錄結構下我們注重的是src目錄，里面是我們要敲碼的地方（其他目錄干嘛的在這里就不解釋了，自行度）
二、開始
首先入口文件是main.js
可以看到
const vm = new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
此處new了一個實例，
並引入了路由 router
定義了實例的模板是App標簽
我們進入與它同級的App.vue文件中
里面由3個結構組成
// html部分 <template></template> // JS部分 <script></script> // 樣式部分 <style></style>
我們的html部分必須由一個根組件包裹
<template> <div class="vue">
// code...
</div> </template>
下面進入正題
<template> <div class="vue">
<h1>This App Title</h1>
<my-name></my-name>
</div>
</template>
<script>
// 一般情況下，我會將組件放在components目錄下
import Name from './components/Name.vue'
export default {
components: {
'my-Name': Name
}
}
</script>
上面我們就完成了對name組件的引用，我們還沒有創建這個組件
進入components目錄，新建文件Name.vue
<template> <div class="name">
{{ myname }}
</div>
</template>
<script>
export default {
props: [
'yourname'
],
computed: {
myname () {
this.yourname
}
}
}
</script>
此處的重點是：props屬性是接收傳過來的值，另外使用了computed屬性將收到的值賦給當前組件的data中的myname屬性上，最終得以展示！
最后在App.vue組件中，使用
<my-name :yourname="fea"></my-name>
即可將值傳給這個組件，並展示在頁面上，具體你想用傳來的值做什么，隨你嘍！