组件(基础)

一、什么是组件？

  components：组件是可复用的 Vue 实例,主要用于开发中，具有相同特征不同数据的模块，把它集成为一个组件 供重复利用。与data平级。

  组件注意点:注册组件时 组件名不要用系统已经使用过的，组件template模板中，只能有一个根元素注册时用驼峰命名，使用时可以用连字符。

二、法一：直接在vm对象中添加组件

例：

<div id="app">
			<Box></Box>
			<Box></Box>
		</div>
		<script>
			var vm=new Vue({
				el: '#app',
				data: {},
				methods: {},
				components:{
					Box:{
						template:`<div>
					              <h1>hello!</h1>
						           <p>world!</p>
					               </div>`
					}
				}
			})
		</script>

 结果如图：

 三、法二：声明式

<script>
			let a = {
				template:`<div>
				          <h1>hello!</h1>
				           <p>world!</p>
				           </div>`
			}
			var vm=new Vue({
				el: '#app',
				data: {},
				methods: {},
				components:{
					Box:a
				}
			})
		</script>

 四、法三：js引入

<div id='app'>
			<Box></Box>
			<Box></Box>
			<my-box></my-box>
		</div>
		<script type="module">		
		   //1.导入
			import Box from "./components/Box.js"
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
				components: {
					//2.注册组件
					Box,
				}
			})
		</script>

//Box.js文件里面：
let a1 = {
	template: `<div>
	             <h1>hello!</h1>
				<p>world!</p>
				</div>`
}
export default a1;

 五、法四：局部组件

意思就是在components里面还可以另创一个vm对象。

<div id='app'>
			<Box></Box>
			<Box></Box>
			<Box2></Box2>
		</div>
		<script type="module">		
		   //1.导入
			import Box from "./components/Box.js"
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
				components: {
					//2.注册组件
					Box,
					Box2:{
						template:`<div>
						       <h1>我是box2</h1>
							   <p @click="fn">{{msg}}</p>
						 </div>`,
						data:function(){
							return {msg:"我是box2中的data"}
						},
						methods:{
							fn(){console.log("hello!world!")}
						}
					}
				},
			})
		</script>

                                                      结果如图(包括点击后)：