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">  <h1>{{ msg }}</h1>  <h2>Essential Links</h2> </div></template><script>export default { name: 'hello', data () {  return {   msg: 'Welcome to Your Vue.js App'  } }}</script><style scoped>h1, h2 { 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 會做出警告?，F在把props 改成props 驗證的寫法, Hello.vue 中的js中的props修改如下：

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

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

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