VUE笔记7（父子组件传值，第三方组件库element-ui,第三方组件库iview,第三方组件库Vant,父子组件配合开发）

2021.12.04事件

一、父子组件传值

1.

    1.1    给组件标签，添加ref属性，可以通过$refs对象获取

    1.2    $refs返回的是一个对象，对象中包含所有带ref属性的组件

2. 

    2.1   $parent     获取父组件对象 ,（获取的组件父级对应的vue实例中的数据）

    2.2   $root           获取根组件对象，（通常以组件所在的vue实例盒子作为根组件）

        注意： 1.上述二个$属性在模板template中使用，

                2.组件中的数据，必须是一个函数data(){   },   由函数返回一个值

      2.3  $children     获取子组件对象,($children返回的是所有子组件对象的数组）

                注意：在父子级的mounted生命周期函数内，才能获取到$children信息

二、第三件组件库element-ui（PC端）

1. npm 安装

    推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

    npm i element-ui -S

2. CDN安装        引入样式style和JS组件库     

    

    

    

   

                 注意：也要引入vue.js，而且引入的组件库js要在vue下面    

       

3.进入https://element.eleme.cn/#/zh-CN，即elment-ui组件库网站找到需要的组件，复制黏贴，修改数据即可

三、第三方组件库iview（PC端）

1. npm 安装

    $ npm install view-design --save

2. CDN安装          引入样式style和JS组件库     

    

   

    

    

                注意：也要引入vue.js，而且引入的组件库js要在vue下面

       

3.进入http://v1.iviewui.com/，即iview组件库网站找到需要的组件，复制黏贴，修改数据即可

四、第三方组件库Vant（移动端）

1. npm 安装

    # Vue 2 项目，安装 Vant 2：npm i vant -S

    # Vue 3 项目，安装 Vant 3：npm i vant@next -S

2. CDN安装          引入样式style和JS组件库     

    

    

    

    

注意：也要引入vue.js，而且引入的组件库js要在vue下面

       

3.进入http://vant-contrib.gitee.io/vant/#/zh-CN/，即Vant组件库网站找到需要的组件，复制黏贴，修改数据即可

五、父子组件配合开发