" />

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

一、什么是組件？

組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 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 注冊全局組件的時(shí)候，組件的名稱使用了駝峰命名，則在引用組件的時(shí)候需要把大寫的駝峰改為小寫的字母，同時(shí)，兩個(gè)單詞之前，使用 “–” 鏈接。如果不使用則直接拿名稱來使用即可。

在這里插入圖片描述

方式二

直接使用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>好用,不錯(cuò)!</h4>
            </div>
        </template>

2、使用id注冊組件

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

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

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

在這里插入圖片描述

四、組件中的data 和 methods

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

2、組件中的data 和實(shí)例中的data 有點(diǎn)不一樣，實(shí)例中的data 可以為一個(gè)對象。但是組件中的data必須是一個(gè)方法。

3、組件中的data除了是一個(gè)方法，還必須返回一個(gè)對象。

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

在這里插入圖片描述

五、組件間的通信方式

在這里插入圖片描述

props/$emit

父組件A通過props的方式向子組件B傳遞，B to A 通過在 B 組件中 $emit, A 組件中 v-on 的方式實(shí)現(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: {  //父組件中子標(biāo)簽自定義的名字
      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è)','西安財(cái)經(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','西安郵電大學(xué)');
    }
  }
}
</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: '傳遞的是一個(gè)值'
    }
  },
  methods: {
    updateTitle(e){
      this.title = e
    }
  },
  components:{
    Son,
  }
}
</script>

總結(jié)

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

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

相關(guān)文章

最新評論