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

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

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

<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 代碼，它定義了在頁面中顯示的內(nèi)容，由于里面還有變量，也可以說定義了一個模版；script中都是js 代碼，它定義這個組件中所需要的數(shù)據(jù)和及其操作，style 里面是css 樣式，定義這個組件的樣式，scoped 表明這里寫的css 樣式只適用于該組件，可以限定樣式的作用域。

script 標(biāo)簽中 export defalut 后面的對象的理解。

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

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

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

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

<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輸入框，當(dāng)進(jìn)行輸入的時候，輸入框下面的內(nèi)容會進(jìn)行同步顯示，只不過它是大寫，當(dāng)輸入完成后，按enter鍵就會彈出我們輸入的內(nèi)容。獲取用戶輸入的內(nèi)容，我們用的是v-model 指令，這個指令將用戶輸入的內(nèi)容綁定到變量上，并且它響應(yīng)式的，我們的變量值會隨著用戶輸入的變化而變化，也就是說我們始終獲取的都是用戶最新的輸入。下面大寫的顯示，用的是computed屬性，彈窗則是給綁定了一個keypress事件，通過描述，你會發(fā)現(xiàn)，它簡直就是一個vue實(shí)例，實(shí)際上它就是個vue實(shí)例。每一個vue組件都是一個vue實(shí)例，更容易明白 export default 后面的對象了。

父子組件之間的通信

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

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

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

在Hello.vue 中, export default 后面的對象中,添加一個字段props, 它是一個數(shù)組, 專門用來接收父組件傳遞過來的數(shù)據(jù). props: ["mesFather"], 這里定義了mesFather 字符串, 和父組件中定義的元素的屬性一一對應(yīng). 但是我們在父組件,就是在 <hello /> 元素中定義的屬性是mes-father， 沒有一一對應(yīng)啊?  這主要是因為，在html 元素中大小寫是不敏感的。 如果我們寫成<hello mesFather="message from father"></hello>， 里面的mesFather  就會轉(zhuǎn)化成mesfather, 相當(dāng)于我們向子組件傳遞了一個mesfather數(shù)據(jù)， 如果在js 文件中，我們定義 props: ["mesFather"]，我們是接受不到數(shù)據(jù)的，因為js 是區(qū)分大小寫的， 只能寫成props: ["mesfather"].  但是在js 文件中，像這種兩個單詞拼成的數(shù)據(jù)，我們習(xí)慣用駝峰命名法，所以vue 做了一個轉(zhuǎn)化，如果在組件中屬性是 - 表示，它 自動會轉(zhuǎn)化成駝峰式。  傳進(jìn)來的數(shù)據(jù)是mes-father, 轉(zhuǎn)化成mesFather, 我們在js 里面寫mesFather, 一一對應(yīng)，子組件可以接受到組件。 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 清空，自己寫，變成如下內(nèi)容

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

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

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

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

在 Hello.vue template中，添加一個input輸入框，給它一個v-model 獲取用戶的輸入，再添加keypress的事件，用于發(fā)射事件，傳輸數(shù)據(jù)。script 中添加data，定義變量來獲取用戶的輸入，添加methods 來處理keypress事件的處理函數(shù)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) 
 //子組件發(fā)射自定義事件valueUp, 并攜帶要傳遞給父組件的值，
 // 如果要傳遞給父組件很多值，這些值要作為參數(shù)依次列出 如 this.$emit('valueUp', this.inputValue, this.mesFather); 
 }
 }
}
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com