Vue.js中組件傳參的方法 - 基於webpack模板

在Vuejs中, 組件之間的傳參是今天第一次接觸, 以前寫的組件互相之間都是獨立的,

弗敢專也, 必以分人

 

環境: node.js npm vue-cli 以上安裝請自行百度

 

1、項目建立

$ vue init webpack

　　　這裏須要注意的是「前面的一些項目名稱什麼的均可以直接回車，最後三個選項要注意，是代碼檢測」，這個代碼檢測有點煩的地方是要求代碼必須極其規範，我tab符用4個空格都不容許，必須兩個，因此到這裏我選擇不用代碼檢測，webpack編譯後不影響使用！

　　　上面的命令會在當前目錄下生成一些文件，這些文件是基於webpack的vue項目模板，省時省力，不用本身去搭建環境（實際上是由於我手動搭建的很不規範，有能力的同窗本身來）

 

　　搭建好了環境，就能夠開始碼嘍！

　　目錄結構下咱們注重的是src目錄，裏面是咱們要敲碼的地方（其餘目錄幹嗎的在這裏就不解釋了，自行度）

 

2、開始

　　首先入口文件是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>便可將值傳給這個組件，並展現在頁面上，具體你想用傳來的值作什麼，隨你嘍！