全局 局部注册 组件通信 父向子传值 子向父传值 scoped作用

1.全局注册

全局入口在main.js, 在new Vue之上注册

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

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

引入axios 全局设置 以及全局设置基地址 

import Vue from 'vue'
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.css"
import axios from'axios'
axios.defaults.baseURL="http://地址"
Vue.prototype.$http=axios
Vue.config.productionTip = false
Vue.directive('focus',{
  inserted(el){
    el.focus()
  }
})

new Vue({
  render: h => h(App),
}).$mount('#app')

全局注册

// 目标: 全局注册 (一处定义到处使用)
// 1. 创建组件 - 文件名.vue
// 2. 引入组件
import Pannel from './components/Pannel'
// 3. 全局 - 注册组件
/*
  语法: 
  Vue.component("组件名", 组件对象)
*/
Vue.component("PannelG", Pannel)

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

单双标签都可以或者小写加-形式, 运行后, 会把这个自定义标签当做组件解析, 使用==组件里封装的标签替换到这个位置==

局部注册

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

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

scoped用法

 总结: style上加scoped, 组件内的样式只在当前vue组件生效

 组件通信 父传子

子组件内, props定义变量, 在子组件使用变量父组件内, 使用子组件, 属性方式给props变量传值

父组件使用 属性绑定的方法传递数据

    子组件里面 使用props来接收

     :title表示变量

创建组件components/MyProduct.vue - 复制下面标签

组件内在props定义变量, 用于接收外部传入的值

App.vue中引入注册组件, 使用时, 传入具体数据给组件显示

components/MyProduct.vue - 准备标签

父组件 

 子组件

子向父传值