单文件组件的局部注册和全局注册详解

单文件组件全局注册

eg App.vue

<template>
	<!-- 这三种写法都可以 -->
	<!-- <nav-bar></nav-bar> -->
	<!-- <NavBar/> -->
	<!-- 引入2个组件时,外面记得多加一个标签,跟标签只有1个 -->
	<div id="container">
		<p>我是p标签</p>
		<NavBar></NavBar>
		<Swiper></Swiper>
	</div>
	
	
</template>

<script>
//step1 引入组件  NavBar别名  './components/NavBar.vue'  引入文件
// 下面的引入都是局部引入
import NavBar from './components/NavBar.vue'
// import Swiper from './components/Swiper.vue'

export default {
	components:{
		// 注册组件  nav-bar 组件名字   NavBar模板名字
		//组件名字和模板别名一致的时候,可以简写,上面渲染模板也可以简写
		//局部注册组件
		// 'nav-bar':NavBar
		NavBar,
		// Swiper
	}
  
}
</script>

<style scoped="scoped">
	p{
		/* 发现把组件里面的p标签样式改了,父组件的样式把子组件的样式改变了 */
		/* style: style标签明确scoped属性, 该样式只在组件内部起作用(样式的组件化); */
		background-color: blue;
	}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
// 全局注册step1: 在main.js引入
import Swiper from './components/Swiper.vue'

Vue.config.productionTip = false

// var vm = new Vue({
// 	el:'',
// 	data:{
		
// 	}
// })

// 全局注册step2: 在main.js全局注册,全局注册后, 在任何地方都能用
Vue.component('Swiper',Swiper)


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

eg NavBar.vue

<template>
	<ul>
		<li>php</li>
		<li>vue</li>
		<li>java</li>
		<li><p>我是p标签</p></li>
	</ul>
</template>

<script>
</script>

<style scoped="scoped">
	/*
	  style: style标签明确scoped属性, 该样式只在组件内部起作用(样式的组件化);
	  一般组件中不建议用标签,这也css实际代码量比较大, 效率较低,建议用class样式
	  */
	p{
		background-color: greenyellow;
	}
</style>