vue學習基礎（3） 組件嵌套，全局註冊組件、局部註冊組件

 

一、VueCli3.x小白入門-組件嵌套

1、父組件、子組件

父組件App.vue,在跟組件中使用子組件。

全局組件在main.js中進行註冊，直接在main.js中進行組件引入就創建了全局組件

局部組件如下：調用過程1、引入組件 2、註冊組件 3、使用組件

遍歷對象，綁定key值

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

    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },

}
</script>

<style>

</style>

 

子組件helloworld.vue，

子組件一定會有一個根標籤

<template>
  <!--HTML結構：只能有一個跟標籤-->
  <div class="hello">
    <h1>{{ msg }}</h1>
    {{hhh}}{{greeting()}}
  </div>
</template>

<script>
  //js部分
export default {
  name: 'HelloWorld',
  props: {//屬性傳值
    msg: String
  },
  data(){
    return {
      hhh:'hhhhh'
    }
  },
  methods:{
    greeting(){
      return `大家好${this.msg}`
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /*css樣式部分*/
h3 {
  margin: 40px 0 0;
}

</style>