[JS][Vue]学习记录之组件嵌套使用

Demo地址

关于如何搭建脚手架,这里暂且不提.
如果我们需要在一个组件中引用另一个组件,有两种方式.

全局组件

新建一个myComponent组件:

//1.展示的视图
<template>
  <div class="myComponent">
    <ul>
      <li v-for="user in users">
        {{user}}
      </li>
    </ul>
  </div>
</template>

<script>
//需要实现的业务逻辑
export default
{
      name: 'myComponent',
      data(){
        return{
          users : ["allen","marry","tom"]
      }
   }
}
</script>
//需要展示的样式
<style scoped>

</style>

vue的模板其实是固定的,包含三块:

• 展示的视图
• 处理的业务逻辑
• 需要的样式

在脚手架生成的项目中的main.js里我们写下如下代码:

import Vue from 'vue'
import App from './App'
import myComponent from './components/myComponent'

Vue.config.productionTip = false
//调用全局组件
Vue.component("myComponent",myComponent);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

这里通过Vue.component("myComponent",myComponent);添加了一个组件,并且import myComponent from './components/myComponent'.

然后在App.vue中:

<template>
  <div id="app">
     <HelloWorld/>
    //在这里直接使用别名就可以了
    <myComponent/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
export default {
  name: 'App',
  components: {
      HelloWorld
  }
}
</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>

在组件中使用组件

这里我们只需要去掉main.js里的全局组件注册和导入即可,同时在App.vue中:

//导入组件
import HelloWorld from './components/HelloWorld'
import myComponent from './components/myComponent'
export default {
  name: 'App',
  components: {
      HelloWorld,
      //注册组件
      myComponent
  }
}
</script>