Vue中的组件

1.组件也可以分为全局组件、局部组件、单文件组件

2.全局组件

也就是所有组件都能用的功能（指令、过滤器、组件）

<div id='app' class="app">
			<p>{{msg|alltool1}}</p>
			<Box></Box>
</div>
<script>
	Vue.filter("alltool1",function(str){
		return str+"-alltool1"
	})
    var vm = new Vue({
		el: '#app',
		data: {
			msg:"appdata"
		},
		methods: {},
		components: {
            Box:{
				template:`<div>
				        <h1>{{msg|box1tool}}</h1>
						 <h1>{{msg|alltool1}}</h1>
				</div>`,
            }
        }
}
</script>

3.局部组件

也就是只有当前组件的功能(指令,过滤器,组件)

<div id='app' class="app">
			<Box></Box>
</div>
<script>
    var vm = new Vue({
		el: '#app',
		data: {
			msg:"appdata"
		},
		methods: {},
		components: {
            Box: {
						template: `<div class="box1">
						  <Box1></Box1>
                          <h1>{{msg}}</h1>
						 </div>`,
						data: function() {
							return {
								msg: "hello"
							}
						},
						methods: {},
						filters: {},
						directives:{},
						components:{
							Box1:{
								template:`<div class="box11">
								         <h1>box11</h1>
								 </div>`
								 
							}
						}
					},
        }
}
</script>

4.单文件组件

单文件可麻烦多了，但是这就是做Vue项目时用的最多的组件方式了。

大致结构：

.App.vue里面:

  template里面写引入的Xxx标签
   import ....
   export default {
    components:{
        Xxx
        }
}

Xxx.vue里面：
template里面写html
export defalt {
    data(){
        return{
              msg:""
        }
    }
}

注意：

1. 在项目下的vue.config.js里面先把eslint严格模式关掉
2. 引入文件时要用@了，其代表的是"./src"
3. 注册的组件名不要跟vue中的和原生DOM重名，注册的名字是驼峰命名法，使用时用连字符
4. 注册的组件可以用单标签也可以用双标签，但如果有插槽就必须用双标签
5. vue文件中可以没有<style>和<script>，但不能没有<template>
6. 可以有多个style
7. 每个组件内部只能有一个根元素，不要在根元素上v-for