vue-父子组件&第三方组件

一、父子组件

1、父子组件传值

（1）父传子
①css样式

② html

③ vue
通过root 获取根组件对象
子组件中的$parent其实就是父组件对象。
注意：自定义组件中的数据必须是一个函数，然后由函数返回一个对象

（2）子传父
① 组件按顺序挂载
通过children信息需要在父级的mounted生命周期函数内，才能获取到

        
        
        
        

            
大明星1
            
姓名：{{star1.name}}
            
年龄：{{star1.age}}
        
        

            
大明星2
            
姓名：{{star2.name}}
            
年龄：{{star2.age}}
        
        

            
大明星3
            
姓名：{{star3.name}}
            
年龄：{{star3.age}}
        
    

二、第三方组件

1、常用的第三方组件

官方文档：https://element.eleme.cn/#/zh-CN
使用步骤：
（1）先引入element-ui样式

（2）再引入vue库

（3）最后引入组件库
注意：第三方组件库，必须在Vue的下面引入

 

            主要按钮
            成功链接
            

                
                
            
            

            
                首页
                活动管理
                活动列表
                活动详情
            
            
                
                
                
                
                
                
            
            
            
    

效果如图所示：

image.png

2、第三方组件iview

官方文档：http://v1.iviewui.com/
iView，是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

组件特性：

• 丰富的组件和功能，满足绝大部分网站场景
• 提供开箱即用的 Admin 系统 和 高阶组件库，极大程度节省开发成本
• 提供专业、优质的一对一技术支持
• 友好的 API ，自由灵活地使用空间
• 细致、漂亮的 UI
• 事无巨细的文档
• 可自定义主题
  （1）先引入iview组件的样式

（2）安装
使用npm

   npm install view-design --save

或使用

使用示例

    

        
        Success
        
        
    

3、第三方组件库Vant

官方文档：https://youzan.github.io/vant-weapp/#/quickstart
（1）引入组件库

（2）使用示例

    
    主要按钮