vuejs 單文件組件.vue 文件的使用

vuejs 自定義了一種.vue文件，可以把html, css, js 寫到一個文件中，從而實現了對一個組件的封裝， 一個.vue 文件就是一個單獨的組件。由于.vue文件是自定義的，瀏覽器不認識，所以需要對該文件進行解析。 在webpack構建中，需要安裝vue-loader 對.vue文件進行解析。在 sumlime 編輯器中，我們 書寫.vue 文件，可以安裝vue syntax highlight 插件，增加對文件的支持。

用vue-cli 新建一個vue項目，看一下.vue文件長什么樣？ 在新建項目的過程中，命令行中會詢問你幾個問題，當詢問是否安裝vue-router 時，這里先選擇否。項目完成后，我們看到src  目錄下有一個componet 目錄，里面有一個 Hello.vue 文件，內容如下，這里對template 里面的內容做了一些刪減

<template>
 <div class="hello">
  <h2>{{ msg }}</h2>
  <h3>Essential Links</h3>
 </div>
</template>

<script>
export default {
 name: 'hello',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 }
}
</script>

<style scoped>
h2, h3 {
 font-weight: normal;
}

ul {
 list-style-type: none;
 padding: 0;
}

li {
 display: inline-block;
 margin: 0 10px;
}

a {
 color: #42b983;
}
</style>

可以看到，在 .vue 文件中， template 中都是html 代碼，它定義了在頁面中顯示的內容，由于里面還有變量，也可以說定義了一個模版；script中都是js 代碼，它定義這個組件中所需要的數據和及其操作，style 里面是css 樣式，定義這個組件的樣式，scoped 表明這里寫的css 樣式只適用于該組件，可以限定樣式的作用域。

script 標簽中 export defalut 后面的對象的理解。

在不使用.vue 單文件時，我們是通過 Vue 構造函數創建一個 Vue 根實例來啟動vuejs 項目，Vue 構造函數接受一個對象，這個對象有一些配置屬性 el, data, component, template 等，從而對整個應用提供支持。

new Vue({
 el: '#app',
 data: {
    msg: "hello Vue"   
 } 
})

在.vue文件中，export default 后面的對象 就相當于 new Vue() 構造函數中的接受的對象，它們都是定義組件所需要的數據（data）, 以及操作數 據的方法等， 更為全面的一個 export default 對象，有methods, data, computed, 這時可以看到, 這個對象和new Vue() 構造函數中接受的對象是一模一樣的。但要注意data 的書寫方式不同。在 .vue 組件, data 必須是一個函數，它return（返回一個對象），這個返回的對象的數據，供組件實現。

 把項目中自帶的hello.vue 內容清空，我們自己寫一個組件來體驗一下這種相同。

<template>
 <div class="hello">
  <input type="txet" placeholder="請輸入文字" v-model="msg" @keypress.enter="enter">
  <p>{{upper}}</p>
 </div>
</template>

<script>
export default {
 data () {
  return {
   msg: 'hello'
  }
 },
 methods:{
  enter () {
   alert(this.msg);
  }
 },
 computed: {
  upper () {
   return this.msg.toUpperCase();
  }
 }
}
</script>

<style scoped>
 input {
  width: 200px;
  height: 20px;
 }
 p {
  color: red;
 }
</style>

頁面中有一個input輸入框，當進行輸入的時候，輸入框下面的內容會進行同步顯示，只不過它是大寫，當輸入完成后，按enter鍵就會彈出我們輸入的內容。獲取用戶輸入的內容，我們用的是v-model 指令，這個指令將用戶輸入的內容綁定到變量上，并且它響應式的，我們的變量值會隨著用戶輸入的變化而變化，也就是說我們始終獲取的都是用戶最新的輸入。下面大寫的顯示，用的是computed屬性，彈窗則是給綁定了一個keypress事件，通過描述，你會發現，它簡直就是一個vue實例，實際上它就是個vue實例。每一個vue組件都是一個vue實例，更容易明白 export default 后面的對象了。

父子組件之間的通信

每一個.vue 文件就是一個 組件，組件和組件相互組合，就成了一個應用，這就涉及到的組件和組件之間的通信，最常用的就是父子之間的通信。在vue 中， 在一個組件中通過 import 引入另一個組件，這個組件就是父組件，被引入的組件就是子組件。

在我們這個vue-cli 項目中，src 文件夾下有一個App.vue 文件，它的script標簽中，import Hello from './components/Hello'，那么 App.vue 就是父組件，components 文件夾下的Hello.vue 就是子組件。父組件通過props 向子組件傳遞數據，子組件通過自定義事件向父組件傳遞數據。

父組件向子組件傳值, 它主要是通過元素的屬性進行的. 在App.vue 的template中,有一個 <hello></hello>, 這就是我們引入的子組件.  給其添加屬性如 mes-father="message from father";  父組件將數據傳遞進去,子組件需要接收才能使用. 怎樣接收呢?

在Hello.vue 中, export default 后面的對象中,添加一個字段props, 它是一個數組, 專門用來接收父組件傳遞過來的數據. props: ["mesFather"], 這里定義了mesFather 字符串, 和父組件中定義的元素的屬性一一對應. 但是我們在父組件,就是在 <hello /> 元素中定義的屬性是mes-father， 沒有一一對應啊?  這主要是因為，在html 元素中大小寫是不敏感的。 如果我們寫成<hello mesFather="message from father"></hello>， 里面的mesFather  就會轉化成mesfather, 相當于我們向子組件傳遞了一個mesfather數據， 如果在js 文件中，我們定義 props: ["mesFather"]，我們是接受不到數據的，因為js 是區分大小寫的， 只能寫成props: ["mesfather"].  但是在js 文件中，像這種兩個單詞拼成的數據，我們習慣用駝峰命名法，所以vue 做了一個轉化，如果在組件中屬性是 - 表示，它 自動會轉化成駝峰式。  傳進來的數據是mes-father, 轉化成mesFather, 我們在js 里面寫mesFather, 一一對應，子組件可以接受到組件。 props 屬性是和data， methods 屬性并列的，屬同一級別。 props 屬性里面定義的變量，在 子組件中的template 中可以直接使用。

App.vue 的template 更改如下：

<template>
 <div id="app">
  <img src="./assets/logo.png">
  <hello mes-father="message from father"></hello>
 </div>
</template>

Hello.vue組件，這里還是把項目中自帶的Hello.vue 清空，自己寫，變成如下內容

<template>
 <div class="hello">
  <p>{{mesFather}}</p>
 </div>
</template>

<script>
export default {
 props:['mesFather']
}
</script>

這時，在頁面中看到 message from father 字樣，父元素向子元素傳遞數據成功。

子組件向父組件傳遞數據，需要用到自定義事件。 例如，我們在Hello.vue ，寫入一個input, 接收用戶輸入，我們想把用戶輸入的數據傳給父組件。這時，input 需要先綁定一個keypress 事件，獲取用戶的輸入，同時還要發射自定義事件，如valueUp, 父組件只要監聽這個自定義事件，就可以知道子組件要向他傳遞數據了。子組件在發射自定義事件時，還可以攜帶參數，父組件在監聽該事件時，還可以接受參數，參數，就是要傳遞的數據。

在 Hello.vue template中，添加一個input輸入框，給它一個v-model 獲取用戶的輸入，再添加keypress的事件，用于發射事件，傳輸數據。script 中添加data，定義變量來獲取用戶的輸入，添加methods 來處理keypress事件的處理函數enter, 整個Hello.vue 文件如下

<template>
 <div class="hello">
  <!-- 添加一個input輸入框 添加keypress事件-->
  <input type="text" v-model="inputValue" @keypress.enter="enter">
  <p>{{mesFather}}</p>
 </div>
</template>

<script>
export default {
 props:['mesFather'],

 // 添加data, 用戶輸入綁定到inputValue變量，從而獲取用戶輸入
 data: function () {
  return {
   inputValue: '' 
  }
 },
 methods: {
  enter () {
   this.$emit("valueUp", this.inputValue) 
   //子組件發射自定義事件valueUp, 并攜帶要傳遞給父組件的值，
   // 如果要傳遞給父組件很多值，這些值要作為參數依次列出 如 this.$emit('valueUp', this.inputValue, this.mesFather); 
  }
 }
}
</script>

在App.vue 中， template中hello 組件綁定一個自定義事件，@valueUp =“receive”, 用于監聽子組件發射的事件，再寫一個 p 元素，用于展示子組件傳遞過來的數據，<p>子組件傳遞過來的數據 {{ childMes }}</p>

相應地，在scrpit中，data 中，定義一個變量childMes, 并在 methods 中，定義一個事件處理函數reciever。整個App.vue修改如下：

<template>
 <div id="app">
  <img src="./assets/logo.png">

  <!-- 添加自定義事件valueUp -->
  <hello mes-father="message from father" @valueUp="recieve"></hello>

  <!-- p元素，用于展示子組件傳遞過來的數據 -->
  <p>子組件傳遞過來的數據 {{childMes}}</p>
 </div>
</template>

<script>
import Hello from './components/Hello'

export default {
 name: 'app',
 components: {
  Hello
 },
 // 添加data
 data: function () {
  return {
   childMes:''
  }
 },

 // 添加methods，自定義事件valueUp的事件處理函數recieve
 methods: {
  recieve: function(mes) { // recieve 事件需要設置參數，這些參數就是子組件傳遞過來的數據，因此，參數的個數，也要和子元素傳遞過來的一致。
   this.childMes = mes;
  }
 }
}
</script>

這時在input中輸入內容，然后按enter鍵，就以看到子組件傳遞過來的數據，子組件向父組件傳遞數據成功。

當在input輸入框中輸入數據，并按enter鍵時，它會觸發keypress.enter事件，從而調用事件處理函數enter， 在enter 中， 我們發射了一個事件valueUp， 并攜帶了一個參數，由于在<hello @valueUp=”recieve”></hello> 組件中， 我們綁定valueUp 事件，所以父組件在時刻監聽valueUp 事件， 當子組件發射value 事件時，父組件立刻捕獲到，并立即調用它的回調函數receive, 在receive 中，我們獲取到子組件傳遞過來的數據，并賦值了data 中的變量childMes, 由于data 數據發生變化，從而觸發dom更新，頁面中就顯示子組件傳遞過來的內容。

其實在子組件中， props 最好的寫法是props 驗證，我們在子組件Hello.vue中寫 props:['mesFather'], 只是表達出，它接受一個參數mesFather, 如果寫成props 驗證，不僅能表達出它需要什么參數，還能表達參數類型，并且如有錯誤，vue 會做出警告。現在把props 改成props 驗證的寫法, Hello.vue 中的js中的props修改如下：

props： {
   'mesFather': {
     type: String,
     default: 'from father',
     required:true
   }
 }

如果是組件與組件之間的通信非常復雜，不光是父子組件，還有兄弟組件，那就需要用到狀態管理，vuex

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。