组件的使用及组件的传值

1. 组件

• 组件是可复用的vue实例,封装标签,样式与 js代码
• 组件化: 封装的思想,将页面上可重用的部分 封装为 组件, 从而方便项目的开发与维护
• 组件内template只能有一个根标签
• 组件内data必须是一个函数,独立作用域

2. 组件的好处

•  便于复用,易于扩展,利于维护

3.组件的使用

• 组件创建: components/pannel.vue
• 组件引入: import pannel from './components/Pannel'   import 组件对象 form 'vue文件路径'
• 组件注册:

1. 局部组件注册:

语法

import 组件对象 from 'vue文件路径'

export default {
    components: {
        "组件名": 组件对象
    }
}

2.全局注册组件

在main.js中

import Vue from 'vue'
import 组件对象 from 'vue文件路径'     import Pannel from './components/Pannel'

Vue.component("组件名", 组件对象)    Vue.component("PannelG", Pannel)

3.使用

全局注册PannelG组件名后, 就可以当做标签在任意Vue文件中template里使用