vue 的 component-优快云博客

本文详细介绍了 Vue.js 中组件的使用方法，包括组件的全局与局部注册方式、is 关键字的作用、props 和 events 的数据传递机制、以及如何使用 slots 插入内容。此外还介绍了动态组件的概念及其实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

component 组件

　　1全局注册：可以在各vue实例中使用

Vue.component('tag-name',{
　　//options
　　...
})

　　2局部注册：只能在注册他的vue实例中使用

new Vue({

components:{
　　'tag-name':{
　　//options
　　.....
}
}
})

View Code

is 作用

　当组件挂载在已存在的元素上时。遇到某些元素，浏览器是不认的：<ul>, <table> <ol>,...

这时，就要使用is 关键字

<ul>
    <li is="tag-name"></li>
</ul>

props，events ，slots：组件中数据的传递

父组件通过props 向下传递数据给子组件，子组件通过events 给父组件发送消息

events
//父组件
<father :balala="balalaFun">
   .....    
    <child></child>
</father>

//子组件
{
name:'child',
    methods:{
    bababa(){
    return this.$emit('balalaFun');//触发自定义事件
}
}
}

<father :da="dada">
 <child></child>    
</father>

//子组件
{
name:'child',
props:[da]
}

slots:模板引擎之类的，在组件中插入内容机制

子组件中定义默认内容，若父组件不向子组件添加任何字符串时，会显示子组件的默认内容

//子组件
<div>
     <h1>hhhh</h1>
    <solt>
       <h2>22222</h2>
   </solt>
</div>

//父组件
<div>
   <child>
       <h3>replace to 22222</h3>
   </child>
<div>

动态组件：为了适应页面局部刷新一处地方应用多个组件

结合is 进行判断，确定是显示1还是2组件~~~~

转载于:https://www.cnblogs.com/smallMoody/p/9091333.html