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