當(dāng)前位置：首頁 >  站長(zhǎng) >  編程技術(shù) >  正文

vue 組件基礎(chǔ)知識(shí)總結(jié)

 2021-01-27 17:00  來源： 腳本之家   我來投稿 撤稿糾錯(cuò)

　 域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過

這篇文章主要介紹了vue 組件基礎(chǔ)知識(shí)的相關(guān)資料，幫助大家更好的理解和使用vue的組件，感興趣的朋友可以了解下

組件基礎(chǔ)

1 組件的復(fù)用

組件是可復(fù)用的Vue實(shí)例。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"> 
  <style>
  
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
  <div id="app">
   <button-counter></button-counter>
   <button-counter></button-counter>
   <button-counter></button-counter>
  </div>
  <script>
   // 定義一個(gè)名為 button-counter 的新組件
   Vue.component('button-counter', {
    data: function () {
     return {
      count: 0
     }
    },
    template: '<button v-on:click="count++">點(diǎn)擊了 {{ count }} 次.</button>'
   });

   new Vue({ el: '#app' });
  </script>
 </body>
</html>

注意當(dāng)點(diǎn)擊按鈕時(shí)，每個(gè)組件都會(huì)各自獨(dú)立維護(hù)它的count。這里自定義組件的data屬性必須是一個(gè)函數(shù)，每個(gè)實(shí)例維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"> 
  <style>
  
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
  <div id="app">
   <button-counter></button-counter>
   <button-counter></button-counter>
   <button-counter></button-counter>
  </div>
  <script>
   var buttonCounterData = {
    count: 0
   }
   // 定義一個(gè)名為 button-counter 的新組件
   Vue.component('button-counter', {
    data: function () {
     return buttonCounterData
    },
    template: '<button v-on:click="count++">點(diǎn)擊了 {{ count }} 次.</button>'
   });

   new Vue({ el: '#app' });
  </script>
 </body>
</html>

2 通過 Prop 向子組件傳遞數(shù)據(jù)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"> 
  <style>
  
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
  <div id="app">
   <blog-post title="My journey with Vue"></blog-post>
   <blog-post title="Blogging with Vue"></blog-post>
   <blog-post title="Why Vue is so fun"></blog-post>
  </div>
  <script>
   Vue.component('blog-post', {
    props: ['title'],
    template: '<h3>{{ title }}</h3>'
   })

   new Vue({ el: '#app' });
  </script>
 </body>
</html>

這里組件就是通過自定義屬性title來傳遞數(shù)據(jù)。

我們可以使用v-bind來動(dòng)態(tài)傳遞prop。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"> 
  <style>
  
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
  <div id="app">
   <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post>
  </div>
  <script>
   Vue.component('blog-post', {
    props: ['title'],
    template: '<h3>{{ title }}</h3>'
   })

   new Vue({
    el: '#app',
    data: {
     posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
     ]
    }
   });
  </script>
 </body>
</html>

3 單個(gè)根元素

每個(gè)組件必須只有一個(gè)根元素。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"> 
  <style>
  
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
  <div id="app">
   <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
  </div>
  <script>
   Vue.component('blog-post', {
    props: ['post'],
    template: `
     <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
     </div>
    `
   })

   new Vue({
    el: '#app',
    data: {
     posts: [
      { id: 1, title: 'My journey with Vue', content: 'my journey...' },
      { id: 2, title: 'Blogging with Vue', content: 'my blog...' },
      { id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
     ]
    }
   });
  </script>
 </body>
</html>

注意到v-bind:post="post"綁定的post是一個(gè)對(duì)象，這樣可以避免了需要通過很多prop傳遞數(shù)據(jù)的麻煩。

4 監(jiān)聽子組件事件

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"> 
  <style>
  
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
  <div id="app">
   <div :style="{fontSize: postFontSize + 'em'}">
    <blog-post v-for="post in posts"
     v-bind:key="post.id"
     v-bind:post="post"
     v-on:enlarge-text="postFontSize += 0.1" />
   </div>   
  </div>
  <script>
   Vue.component('blog-post', {
    props: ['post'],
    template: `
     <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text')">放大字體</button>
      <div v-html="post.content"></div>
     </div>
    `
   })

   new Vue({
    el: '#app',
    data: {
     postFontSize: 1,
     posts: [
      { id: 1, title: 'My journey with Vue', content: 'my journey...' },
      { id: 2, title: 'Blogging with Vue', content: 'my blog...' },
      { id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
     ]
    }
   });
  </script>
 </body>
</html>

子組件通過$emit方法并傳入事件名稱來觸發(fā)一個(gè)事件。父組件可以接收該事件。

我們可以使用事件拋出一個(gè)值。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"> 
  <style>
  
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
  <div id="app">
   <div :style="{fontSize: postFontSize + 'em'}">
    <blog-post v-for="post in posts"
     v-bind:key="post.id"
     v-bind:post="post"
     v-on:enlarge-text="postFontSize += $event" />
   </div>   
  </div>
  <script>
   Vue.component('blog-post', {
    props: ['post'],
    template: `
     <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text', 0.2)">放大字體</button>
      <div v-html="post.content"></div>
     </div>
    `
   })

   new Vue({
    el: '#app',
    data: {
     postFontSize: 1,
     posts: [
      { id: 1, title: 'My journey with Vue', content: 'my journey...' },
      { id: 2, title: 'Blogging with Vue', content: 'my blog...' },
      { id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
     ]
    }
   });
  </script>
 </body>
</html>

在父組件中，我們可以通過$event訪問到被拋出的這個(gè)值。

我們可以在組件上使用v-model。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"> 
  <style>
  
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
  <div id="app">
   <!-- <input v-model="searchText"> -->
   <input v-bind:value="searchText" v-on:input="searchText = $event.target.value">
   <p>{{ searchText }}</p>
  </div>
  <script>
   new Vue({
    el: '#app',
    data: {
     searchText: ''
    }
   });
  </script>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"> 
  <style>
  
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
  <div id="app">
   <custom-input v-model="searchText"></custom-input>
   <custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input>
   <p>{{ searchText }}</p>
  </div>
  <script>
   Vue.component('custom-input', {
    props: ['value'],
    template: `<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" >`
   })

   new Vue({
    el: '#app',
    data: {
     searchText: ''
    }
   });
  </script>
 </body>
</html>

最后，注意解析 DOM 模板時(shí)的注意事項(xiàng)。

以上就是vue 組件基礎(chǔ)知識(shí)總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于vue 組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

來源：腳本之家

鏈接：https://www.jb51.net/article/204818.htm

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！

相關(guān)文章

加載更多

熱門排行

信息推薦