" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一篇文章帶你了解Vue組件的創(chuàng)建和使用

 更新時間:2021年12月24日 16:18:37   作者:Darlingmi  
這篇文章主要為大家介紹了Vue組件的創(chuàng)建和使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助

一、什么是組件?

組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素,封裝可重用的代碼。在較高層面上,組件是自定義元素,Vue.js 的編譯器為它添加特殊功能。

二、創(chuàng)建全局組件

方式一

1、Vue.extend

       var com1 = Vue.extend({
// 通過 template 屬性,指定了組件要展示的HTML結(jié)構(gòu)
               template: '<h3>這是使用 Vue.extend 創(chuàng)建的組件</h3>'
            })

2、Vue.component

Vue.component(‘組件的名稱', 創(chuàng)建出來的組件模板對象) 注冊組件

  Vue.component('myCom1', com1)

注意:如果使用Vue.Component 注冊全局組件的時候,組件的名稱使用了駝峰命名,則在引用組件的時候需要把大寫的駝峰改為小寫的字母,同時,兩個單詞之前,使用 “–” 鏈接。如果不使用則直接拿名稱來使用即可。

在這里插入圖片描述

方式二

直接使用Vue.component

            Vue.component('mycom2', {
                template: '<div><h3>這是直接使用 Vue.component 創(chuàng)建出來的組件</h3>
<span>123</span></div>'
            })

示例:

在這里插入圖片描述

方式三

1、被控制的 #app 外面,使用 template 元素,定義組件的HTML模板結(jié)構(gòu)。

<template id="tmpl">
            <div>
                <h1>這是通過 template 元素,在外部定義的組件結(jié)構(gòu)</h1>
                <h4>好用,不錯!</h4>
            </div>
        </template>

2、使用id注冊組件

   Vue.component('mycom3', {
        template: '#tmpl'
    })

三、 創(chuàng)建局部組件

局部組件的創(chuàng)建和全局組件的創(chuàng)建方法一樣。唯一區(qū)別的是,局部組件是在Vue實例中定義的。

在這里插入圖片描述

四、組件中的data 和 methods

1、組件可以擁有自己的數(shù)據(jù)。

2、組件中的data 和實例中的data 有點不一樣,實例中的data 可以為一個對象。但是組件中的data必須是一個方法。

3、組件中的data除了是一個方法,還必須返回一個對象。

4、組件中的data 的使用方式和 實例中的data 使用方式一樣。(methods也一樣)

在這里插入圖片描述

五、組件間的通信方式

在這里插入圖片描述

props/$emit

父組件A通過props的方式向子組件B傳遞,B to A 通過在 B 組件中 $emit, A 組件中 v-on 的方式實現(xiàn)。

子組件:

<template>
  <div class="hello">
    <ul>
      <li v-for="(user,index) in users" v-bind:key="index">{{ user }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "users",
  props: {
    users: {  //父組件中子標簽自定義的名字
      type: Array,
      require: true
    }
  }
}
</script>

<style scoped>
 li{
   list-style-position: inside;
 }
</style>

父組件:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Users v-bind:users="users"> </Users>
  </div>
</template>

<script>
import Users from "@/components/users";
export default {
  name: 'App',
  data(){
    return {
      users: ['西安郵電','西安石油','西北政法','西安工業(yè)','西安財經(jīng)']
    }
  },
  components: {
    Users,
  }
}
</script>

通過事件形式

子組件

<template>
  <header>
    <h1 @click="changeTitle">{{ title }}</h1>
  </header>
</template>
<script>
export default {
  name: "Son",
  data(){
    return {
      title: 'Vue.js Demo'
    }
  },
  methods: {
    changeTitle(){
      this.$emit('titleChanged','西安郵電大學');
    }
  }
}
</script>

<style scoped>
 h1{
   background-color: greenyellow;
 }
</style>

父組件:

<template>
  <div id="app">
    <Son v-on:titleChanged="updateTitle"></Son>
    <h2>{{ title }}</h2>
  </div>
</template>
<script>
import Son from "@/components/Son";
export default {
  name: "Father",
  data(){
    return {
      title: '傳遞的是一個值'
    }
  },
  methods: {
    updateTitle(e){
      this.title = e
    }
  },
  components:{
    Son,
  }
}
</script>

總結(jié)

子組件通過events(事件)給父組件發(fā)送消息,實際上就是子組件把自己的數(shù)據(jù)發(fā)送到父組件。

本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

  • axios對請求各種異常情況處理的封裝方法

    axios對請求各種異常情況處理的封裝方法

    今天小編就為大家分享一篇axios對請求各種異常情況處理的封裝方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue實現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能

    vue實現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能

    這篇文章主要介紹了vue實現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能,需要的朋友可以參考下
    2019-04-04
  • vue-cli基礎配置及webpack配置修改的完整步驟

    vue-cli基礎配置及webpack配置修改的完整步驟

    這篇文章主要給大家介紹了關(guān)于vue-cli基礎配置及webpack配置修改的完整步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者使用vue-cli具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-10-10
  • vue監(jiān)聽頁面上的報錯信息

    vue監(jiān)聽頁面上的報錯信息

    這篇文章主要介紹了vue監(jiān)聽頁面上的報錯信息,window.onerror和window.addEventListener(‘error‘)的區(qū)別,需要的朋友可以參考下
    2023-10-10
  • VUE學習之Element-ui文件上傳實例詳解

    VUE學習之Element-ui文件上傳實例詳解

    今天進行了element?文件上傳組件的運用,寫一下心得,下面這篇文章主要給大家介紹了關(guān)于VUE學習之Element-ui文件上傳的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-10-10
  • vue+iview?Table表格多選切換分頁保持勾選狀態(tài)

    vue+iview?Table表格多選切換分頁保持勾選狀態(tài)

    這篇文章主要為大家詳細介紹了vue+iview?Table表格多選切換分頁保持勾選狀態(tài),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • 詳解在Vue中如何模塊化使用Vuex

    詳解在Vue中如何模塊化使用Vuex

    這篇文章給大家介紹了在Vue 中如何模塊化使用 Vuex,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
    2024-01-01
  • Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)

    Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)

    這篇文章主要介紹了Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • vue3引入highlight.js進行代碼高亮的方法實例

    vue3引入highlight.js進行代碼高亮的方法實例

    最近忙著開發(fā)自己的開發(fā)腳手架,在做代碼生成器的時候,有個預覽功能,需要讓代碼高亮,下面這篇文章主要給大家介紹了關(guān)于vue3引入highlight.js進行代碼高亮的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • Vue3使用 createApp 自定義通用Dialog的方法

    Vue3使用 createApp 自定義通用Dialog的方法

    這篇文章主要介紹了Vue3使用 createApp 自定義通用Dialog的方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-01-01

最新評論