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

Demo地址

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

全局组件

新建一个myComponent组件:

//1.展示的视图



//需要展示的样式

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: ''
})

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

然后在App.vue中:

在组件中使用组件

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

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