Vue3.0 组件

目录

1.组件components

（1）组件的组织;

（2）全局组件

（3）props传递参数

（4）监听子组件发出的事件

（5）.组件的插槽（嵌套）

---

1.组件components

（1）组件的组织;

通常一个应用会以一棵嵌套的组件树的形式来组织,如下图所示

（2）全局组件

app.component 来创建组件：

const app = Vue.createApp({			 
})
app.component("btn",{
	template:`{{n}}`,
	data(){return {n:1}}
})
app.mount("#app")

（2）局部组件

定义组件

const step = {
	template:`
-{{n}}+
`,
	data(){return {n:1}}
}

注册组件

const app = Vue.createApp({	
	components:{step}
})

使用组件

（3）props传递参数

传递

接收

props:{
    "num":{type:Number,default:1}
},

使用

data(){return {n:this.num}}

对象与数组的默认值必须是函数的返回值

 （4）监听子组件发出的事件

String字符串 Number数字 Boolean布尔 Array数组

Object对象 Date日期 Function函数 Symbol

5.组件的插槽（嵌套）

（1）定义：和 HTML 元素一样，我们经常需要向一个组件传递内容 我们使用 作为我们想要插入内容的占位符

     你好，我是嵌套内容

 template:`
组件的标题
`

（2）作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。 当一个组件被用来渲染一个项目数组时，这是一个常见的情况，我们希望能够自定义每个项目的渲染方式。

    	


const step = {
    template: `

	
                   
`,
data() {  return {list: ["vue", 'react', 'angular']}}}

子

父

ok看到这里我们vue3.0组件就差不多结束了，希望对大加有所帮助