一、組件組成

組件最大的優(yōu)勢就是可復(fù)用性
通常將組件定義在.vue中，也就是SFC單文件組件
組件的基本組成：

<template>
  <h3>基礎(chǔ)標(biāo)簽</h3>
</template>

<script>
export default {
  name: "MyComponent"
}
</script>

<!-- scoped 讓當(dāng)前樣式只在當(dāng)前組件中生效-->
<style scoped>

</style>

<template>
<!--  第三步 顯示組件-->
  <MyComponent/>
<!--  這樣寫法也可以-->
  <my-component></my-component>
</template>

<script>
//第一步 引入組件
import MyComponent from './components/MyComponent.vue'

export default {

  name: 'App',
  //第二步 注入組件
  components: {
    MyComponent
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

二、組件嵌套關(guān)系

組件允許我們將UI劃分為獨立的、可重用的部分，并且對每個部分單獨思考
實際應(yīng)用中組件常常被組件成層層嵌套的樹狀結(jié)構(gòu)

三、組件的注冊方式

Vue組件使用前要注冊，注冊有兩種方式：全局注冊和局部注冊
全局注冊在main.js中注冊

import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from "@/components/MyComponent";

const app=createApp(App)
/**
 * 在這中間寫app的組件注冊
 * 全局注冊的問題：
 * 1、組件不管是否使用 都要打包在JS中
 * 2、全局在大型項目中使得項目依賴不明確，父組件中使用子組件時，不太容易定位子組件的實現(xiàn)，影響長期的可維護性
 */

app.component("MyComponent",MyComponent)

app.mount('#app')

局部注冊按照之前的來就好了

四、組件傳遞數(shù)據(jù)（通過props）

組件之間不是完全獨立的，而是有交集的，組件與組件之間可以傳遞數(shù)據(jù)
傳遞數(shù)據(jù)的解決方案就是props

<template>
  <h3>{{title}}</h3>
  <h3>{{demo}}</h3>
<!--  動態(tài)傳-->
  <h3>{{message}}</h3>
<!--  注意事項 props傳遞數(shù)據(jù) 只能從父傳給子 不能方向傳-->
</template>

<script>
export default {
  name: "sonDemo",
  props:["title","demo","message"]
}
</script>

<style scoped>

</style>

<template>
  <Son title="Parent數(shù)據(jù)" demo="測試" :message="message"/>
</template>

<script>
import Son from "@/components/sonDemo";
export default {
  name: "parentDemo",
  components: {Son},
  data(){
    return{
      message:"hello"
    }
  }
}
</script>

<style scoped>

</style>

五、組件傳遞多種數(shù)據(jù)類型

props不僅僅可以傳字符串 還可以傳其他類型 例如數(shù)字、對象、數(shù)組
任何類型都可以用props傳

<template>
<!--  在這里傳值 可以靜態(tài)傳值 也可以動態(tài)傳值-->
  <Son title="Parent數(shù)據(jù)" demo="測試" :message="message" :age="age" :names="names" :user="user"/>
</template>

<script>
import Son from "@/components/sonDemo";
export default {
  name: "parentDemo",
  components: {Son},
  data(){
    return{
      message:"hello",
      age:18,
      names:["zhansgan","lisi"],
      user:{
        name:"hello",
        age:20
      }
    }
  }
}
</script>

<style scoped>

</style>

<template>
  <h3>{{title}}</h3>
  <h3>{{demo}}</h3>
<!--  動態(tài)傳-->
  <h3>{{message}}</h3>

  <button @click="clickAgain">click</button>
<!--  注意事項 props傳遞數(shù)據(jù) 只能從父傳給子 不能方向傳-->
</template>

<script>
export default {
  name: "sonDemo",
  //接受傳到的值
  props:["title","demo","message","names","age","user"],
  methods:{
    clickAgain(){
      console.log(this.names)
      console.log(this.user)
    }
  }
}
</script>

<style scoped>

</style>

六、組件傳遞props校驗

<template>
<!--  在這里傳值 可以靜態(tài)傳值 也可以動態(tài)傳值-->
  <Son title="Parent數(shù)據(jù)" demo="測試" :message="message" :age="age" :names="names" :user="user"/>
</template>

<script>
import Son from "@/components/sonDemo";
export default {
  name: "parentDemo",
  components: {Son},
  data(){
    return{
      message:"hello",
      age:18,
      names:["zhansgan","lisi"],
      user:{
        name:"hello",
        age:20
      }
    }
  }
}
</script>

<style scoped>

</style>

<template>
  <h3>{{title}}</h3>
  <h3>{{demo}}</h3>
<!--  動態(tài)傳-->
  <h3>{{message}}</h3>
  <h3>{{age}}</h3>

  <p v-for="(item,index) of names" v-bind:key="index">{{item}}</p>

  <button @click="clickAgain">click</button>
<!--  注意事項 props傳遞數(shù)據(jù) 只能從父傳給子 不能方向傳-->
<!--  注意：prop是已讀的 不可以修改-->
</template>

<script>

export default {
  name: "sonDemo",
  //接受傳到的值
  props: {
    title:{
      type:String,
      //設(shè)置這是必選項
      required:true
    },
    names:{
      type:[String,Number,Array,Object],
      //如果傳的是個數(shù)組類型或?qū)ο箢愋?則需要通過工廠函數(shù)返回默認(rèn)值
      default(){
        return ["1",'2']
      }
    },
    age:{
      type:Number,
      //可以設(shè)置默認(rèn)值
      //數(shù)字和字符串可以直接default 如果傳的是個數(shù)組類型或?qū)ο箢愋?則需要通過工廠函數(shù)返回默認(rèn)值
      default:0
    },
    user:{},
    demo:{},
    message:{}
  },
  methods:{
    clickAgain(){
      console.log(this.names)
      console.log(this.user)
    }
  }
}
</script>

<style scoped>

</style>

七、組件事件

組件的模板表達(dá)式中，可以直接用$emit方法觸發(fā)自定義事件
觸發(fā)自定義的目的是組件之間傳遞數(shù)據(jù)文章來源地址http://www.zghlxwxcb.cn/news/detail-709554.html

<template>
  <h3>組件事件</h3>
  <son-demo @someEvent="getHandle"></son-demo>
  <p>{{message}}</p>
</template>

<script>
import SonDemo from "@/components/sonDemo";
export default {
  name: "parentDemo",
  components: {SonDemo},
  methods:{
    getHandle(data){
      console.log("觸發(fā)了",data)
      this.message=data
    }
  },
  data(){
    return{
      message:""
    }
  }
}
</script>

<style scoped>

</style>

<template>
    <h3>Child</h3>
    <button @click="clickEventHandle">傳遞數(shù)據(jù)</button>
</template>
<!--組件之間傳遞數(shù)據(jù)的方案
  1、父傳子  props
  2、子傳父  自定義事件$emit
-->
<script>
export default {
  name: "sonDemo",
  methods:{
    clickEventHandle(){
      console.log("準(zhǔn)備觸發(fā)")
      //自定義事件 還可以傳參
      this.$emit("someEvent",this.message)
    }
  },
  data(){
    return{
      message:"child數(shù)據(jù)123"
    }
  }
}
</script>

<style scoped>

</style>

到了這里，關(guān)于Vue前端框架10 組件的組成、組件嵌套關(guān)系、組件的注冊方式、組件傳遞數(shù)據(jù)（props $emit）、數(shù)組傳遞多種數(shù)據(jù)類型、組件傳遞props校驗、組件事件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！