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

一、父子组件

1、父子组件传值

（1）父传子
①css样式

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            border: 1px solid #eee;
            padding: 10px;
            margin: 10px 0;
        }
        .child1{
            border: 1px solid red;
            padding: 10px;
        }
        .child2{
            border: 1px solid greenyellow;
            padding: 10px;
            margin: 10px 0;
        }
        .child3{
            border: 1px solid orangered;
            padding: 10px;
        }
    </style>

② html

<div id="app">
        <Child1></Child1>
        <Child2></Child2>
        <Child3></Child3>
    </div>

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

<script>
        Vue.config.productionTip = false
        // Child1组件
        Vue.component('Child1',{
            template:`
            <div class='child1'>
                <h3>房产信息</h3>
                <p>{{$parent.house.address}}</p>
                <p>{{$parent.house.size}}</p>
            </div>`,
            },
            mounted(){
                console.log('子级mounted');
            },
            created() {
                console.log('子级created');
            },
        })
        // Child2组件
        Vue.component('Child2',{
            template:`
            <div class='child2'>
                <h3>汽车信息</h3>
                <p>{{$parent.car.name}}</p>
                <p>{{$parent.car.color}}</p>
            </div>`,
        })

        // Child3组件
        Vue.component('Child3',{
            template:`
            <div class='child3'>
                <h3>存款信息</h3>
                <p>{{$parent.money.value}}</p>
                <p>{{$parent.money.bank}}</p>
            </div>`,
        })

        // 暂且将#app对应的内容当做根组件
        new Vue({
            el:'#app',
            data:{
                house:{
                    address:'时光澔韵7栋2单元204室',
                    size:'240平'
                },
                car:{
                    name:'奔驰S400',
                    color:'白色'
                },
                money:{
                    value:'150w',
                    bank:'中国建设银行'
                }
            },
            mounted() {
                console.log('父级mounted')
            },
            created() {
                console.log('父级created')
            },
        })
    </script>

（2）子传父
① 组件按顺序挂载
通过children返回所有子组件对象的数据。 **注意：**children信息需要在父级的mounted生命周期函数内，才能获取到

<div id="app">
        <Child1></Child1>
        <Child2></Child2>
        <Child3></Child3>
        <div class="star">
            <h3>大明星1</h3>
            <p>姓名：{{star1.name}}</p>
            <p>年龄：{{star1.age}}</p>
        </div>
        <div class="star">
            <h3>大明星2</h3>
            <p>姓名：{{star2.name}}</p>
            <p>年龄：{{star2.age}}</p>
        </div>
        <div class="star">
            <h3>大明星3</h3>
            <p>姓名：{{star3.name}}</p>
            <p>年龄：{{star3.age}}</p>
        </div>
    </div>

<script>
       <script>
        Vue.config.productionTip = false
        // Child1组件
        Vue.component('Child1',{
            // 组件中的数据，必须是一个函数，由函数返回一个对象
            data() {
                return {
                    name:'张杰',
                    age:25
                }
            },
        })
        // Child2组件 
        Vue.component('Child2',{
            data() {
                return {
                    name:'邓紫棋',
                    age:27
                }
            },
        })

        // Child3组件
        Vue.component('Child3',{
            data() {
                return {
                    name:'周杰伦',
                    age:28
                }
            },
        }),
        // 暂且将#app对应的内容当做根组件
        new Vue({
            el:'#app',
            data:{
                // 接收子组件的数据的对象
                star1:{
                    name:'',
                    age:0
                },
                star2:{
                    name:'',
                    age:0
                },
                star3:{
                    name:'',
                    age:0
                }
            },
            mounted() {
                console.log('父级mounted')
                // 注意：在父子级的mounted生命周期函数内，才能获取到$children信息
                // $children返回的是所有子组件对象的数据
                 this.star1.name = this.$children[0].name
                 this.star1.age = this.$children[0].age
                 this.star2.name = this.$children[1].name
                 this.star2.age = this.$children[1].age
                 this.star3.name = this.$children[2].name
                 this.star3.age = this.$children[2].age
            },

② 组件不按顺序挂载 推荐使用
在子传父传值过程中，如果组件挂载顺序没有任何的变化可以直接使用children获取数据，如果不确定组件挂载顺序是否会发生变化，则选择给组件标签添加ref属性。 代码使用如下： 给组件标签，添加ref属性，可以通过refs获取。$refs返回的是一个对象，对象中包含所有带有ref属性的组件
注意：ref的属性名和对象属性名相同

<Child1 ref="star1"></Child1>
        <Child2 ref="star2"></Child2>
        <Child3 ref="star3"></Child3>
        <div class="star">
            <h3>大明星1</h3>
            <p>姓名：{{star1.name}}</p>
            <p>年龄：{{star1.age}}</p>
        </div>
        <div class="star">
            <h3>大明星2</h3>
            <p>姓名：{{star2.name}}</p>
            <p>年龄：{{star2.age}}</p>
        </div>
        <div class="star">
            <h3>大明星3</h3>
            <p>姓名：{{star3.name}}</p>
            <p>年龄：{{star3.age}}</p>
        </div>

 mounted() {
                console.log('父级mounted')
                // $refs 返回的是一个对象，对象中包含所有带有ref属性的组件
                // console.log(this.$refs);
                this.star1.name = this.$refs.star1.name
                this.star1.age = this.$refs.star1.age
                this.star2.name = this.$refs.star2.name
                this.star2.age = this.$refs.star2.age
                this.star3.name = this.$refs.star3.name
                this.star3.age = this.$refs.star3.age

            },

（3）非父子传值 | 跨级传值
①通过parent.parent获取父组件对象
②通过$root 获取根组件对象

       Vue.component('Child1',{
            template:`
            <div class='child1'>
                <h3>房产信息</h3>
                <p>{{$parent.house.address}}</p>
                <p>{{$parent.house.size}}</p>
                <Childson></Childson>
            </div>`,
            },
       Vue.component('Childson', {
            // $parent 获取父组件对象
            // $root 获取根组件对象
            template:`
            <div class='childSon1'>
                <h3>房产信息</h3>
                <p>{{$parent.$parent.house.address}}</p>
                <p>{{$parent.$parent.house.size}}</p>
                <hr>
                <p>{{$root.house.address}}</p>
                <p>{{$root.house.size}}</p>
            </div>`
        })

2、父子组件配合开发

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .tabs{
            width: 300px; 
            padding: 5px;
            border: 1px solid #eee;         
        }
        .tabs .title{
            display: flex;
            margin-bottom: 10px;
        }
        .tabs .title li{
            padding: 2px 6px;
            margin: 0 2px;
            cursor: pointer;
            border: 1px solid #eee;
        }
        .tabs .title li.active{
            color: white;
            background-color: orangered;
        }
        .tabs .content{
            border: 1px solid #eee;
        }
    </style>

   <div id="app">
        <b-tabs :list="list"></b-tabs>
    </div>

<script>
        Vue.config.productionTip = false
        Vue.component('b-tabs', {
            template:`
            <div class='tabs'>
                <ul class='title'>
                    <li @click='activeIndex=index' :class='{active:activeIndex===index}' v-for='(item,index) in list' :key='index'>{{item.city}}</li>
                </ul>
                <ul class='content'>
                    <li v-show='activeIndex===index' v-for='(item,index) in list' :key='index'>{{item.content}}</li>
                </ul>
            </div>
            `,
            props:['list'],
            data() {
                return {
                    //高亮索引
                    activeIndex:0,
                }
            },
        })
        new Vue({
            el:'#app',
            data() {
                return {                   
                    list:[
                        {
                            city:'北京',
                            content:'北京烤鸭'
                        },
                        {
                            city:'南京',
                            content:'南京盐水鸭'
                        },
                        {
                            city:'无锡',
                            content:'无锡小笼包'
                        },
                        {
                            city:'昆明',
                            content:'昆明鲜花饼'
                        },
                    ]
                }
            },
        })
    </script>

二、第三方组件

1、常用的第三方组件

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

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

（2）再引入vue库


<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>

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

    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


 <div id="app">
            <el-button type="primary">主要按钮</el-button>
            <el-link type="success">成功链接</el-link>
            <div class="block">
                <el-date-picker v-model="datel" type="date" placeholder="选择日期">
                </el-date-picker>
            </div>
            <hr>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
            </el-breadcrumb>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="1000">
            </el-pagination>
    </div>

<script>
        new Vue({
            el: '#app',
            data() {
                return {
                    // 获取时间
                    datel: '',
                    tableData: [{
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }],
                }
            }
        })
    </script>

效果如图所示：


image.png

2、第三方组件iview

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

组件特性：

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

（2）安装
使用npm

   npm install view-design --save

或使用 <script> 全局引用

<script type="text/javascript" src="iview.min.js"></script>

使用示例

    <div id="app">
        <!-- 注意：非 template/render 模式下，需使用 i-button。 -->
        <i-button type="success">Success</i-button>
        <!-- 注意：非 template/render 模式下，需使用 i-table。 -->
        <i-table :columns="columns1" :data="data1"></i-table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    columns1: [
                        {
                            title: '姓名',
                            key: 'name'
                        },
                        {
                            title: '年龄',
                            key: 'age'
                        },
                        {
                            title: '地址',
                            key: 'address'
                        },
                        {
                            title: '日期',
                            key: 'date'
                        }
                    ],
                    data1: [
                        {
                            name: 'John Brown',
                            age: 18,
                            address: 'New York No. 1 Lake Park',
                            date: '2016-10-03'
                        },
                        {
                            name: 'Jim Green',
                            age: 24,
                            address: 'London No. 1 Lake Park',
                            date: '2016-10-01'
                        },
                        {
                            name: 'Joe Black',
                            age: 30,
                            address: 'Sydney No. 1 Lake Park',
                            date: '2016-10-02'
                        },
                        {
                            name: 'Jon Snow',
                            age: 26,
                            address: 'Ottawa No. 2 Lake Park',
                            date: '2016-10-04'
                        }
                    ]
                }
            },
        })
    </script>

3、第三方组件库Vant

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

<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

（2）使用示例

<div id="app">
    <!-- 按钮组件 -->
    <van-button type="primary">主要按钮</van-button>
    <!-- 单元格组件 -->
    <van-cell-group>
        <van-cell title="单元格" value="内容" />
        <van-cell title="单元格" value="内容" label="描述信息" />
    </van-cell-group>
    <!-- 输入框组件 -->
    <van-cell-group>
        <van-field v-model="value" label="文本" placeholder="请输入用户名" />
    </van-cell-group>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                value:'123'
            }
        },
    })
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容