VUE的学习从入门到拿捏（二）

1，组件components

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。组件是可复用的 Vue 实例。

  局部注册：在挂载点内以<组件名>这样的方式来使用组件，在挂载点内组件名称的地方，vue解析之后就会把组件的template模板中的内容展示出来。

定义组件
const step = {
	template:`<div><button @click="n--">-</button>{
  {n}}<button @click="n++">+</button></div>`,
	data(){return {n:1}}
}

注册组件
const app = Vue.createApp({	
	components:{step}
})
使用组件
<step></step>
<step></step>

 全局组件：局部注册的组件仅能在当前实例的挂载点内使用，如果需要在多个vue实例中使用同一个组件，就需要使用全局注册的方式来注册这个组件。

app.component 来创建组件：

const app = Vue.createApp({			 
})
app.component("btn",{
	template:`<button @click="n++">{
  {n}}</button>`,
	data(){return {n:1}}
})
app.mount("#app")	 

2，props 传递参数

父传子：

 父组件想要向子组件传值时，那么需要在子组件引入的地方绑定一个属性，属性值就是要传的数据，并且要在父组件中引入子组件。

这个自定义属性的属性值是用来存放父组件向子组件传递的数据。

<div id="app">
			<steper :value="w1" @numchange="w1=$event"></steper><br>
			<steper :value="w2" @numchange="w2=$event"></steper><br>
			<steper></steper>
			<p :style="{'width':w1+'px','height':w1+'px',borderRadius:w1+'px',border:'1px solid red'}"></p>
			<p :style="{'width':w2+'px','height':w2+'px',borderRadius:w2+'px',border:'1px solid green'}"></p>
		</div>
		<script type="text/javascript">
			//定义组件
			//组件父传子 props（props值是只读的）
			const steper = {
				template: `
				<span>
				<button