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>