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其實(shí)就是父組件對象。
注意：自定義組件中的數(shù)據(jù)必須是一個函數(shù)，然后由函數(shù)返回一個對象

<script>
        Vue.config.productionTip = false
        // Child1組件
        Vue.component('Child1',{
            template:`
            <div class='child1'>
                <h3>房產(chǎn)信息</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對應(yīng)的內(nèi)容當(dāng)做根組件
        new Vue({
            el:'#app',
            data:{
                house:{
                    address:'時光澔韻7棟2單元204室',
                    size:'240平'
                },
                car:{
                    name:'奔馳S400',
                    color:'白色'
                },
                money:{
                    value:'150w',
                    bank:'中國建設(shè)銀行'
                }
            },
            mounted() {
                console.log('父級mounted')
            },
            created() {
                console.log('父級created')
            },
        })
    </script>

（2）子傳父
① 組件按順序掛載
通過children返回所有子組件對象的數(shù)據(jù)。 **注意：**children信息需要在父級的mounted生命周期函數(shù)內(nèi)，才能獲取到

<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',{
            // 組件中的數(shù)據(jù)，必須是一個函數(shù)，由函數(shù)返回一個對象
            data() {
                return {
                    name:'張杰',
                    age:25
                }
            },
        })
        // Child2組件 
        Vue.component('Child2',{
            data() {
                return {
                    name:'鄧紫棋',
                    age:27
                }
            },
        })

        // Child3組件
        Vue.component('Child3',{
            data() {
                return {
                    name:'周杰倫',
                    age:28
                }
            },
        }),
        // 暫且將#app對應(yīng)的內(nèi)容當(dāng)做根組件
        new Vue({
            el:'#app',
            data:{
                // 接收子組件的數(shù)據(jù)的對象
                star1:{
                    name:'',
                    age:0
                },
                star2:{
                    name:'',
                    age:0
                },
                star3:{
                    name:'',
                    age:0
                }
            },
            mounted() {
                console.log('父級mounted')
                // 注意：在父子級的mounted生命周期函數(shù)內(nèi)，才能獲取到$children信息
                // $children返回的是所有子組件對象的數(shù)據(jù)
                 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獲取數(shù)據(jù)，如果不確定組件掛載順序是否會發(fā)生變化，則選擇給組件標(biāo)簽添加ref屬性。 代碼使用如下： 給組件標(biāo)簽，添加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>房產(chǎn)信息</h3>
                <p>{{$parent.house.address}}</p>
                <p>{{$parent.house.size}}</p>
                <Childson></Childson>
            </div>`,
            },
       Vue.component('Childson', {
            // $parent 獲取父組件對象
            // $root 獲取根組件對象
            template:`
            <div class='childSon1'>
                <h3>房產(chǎn)信息</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、父子組件配合開發(fā)

<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" >

（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: '上海市普陀區(qū)金沙江路 1518 弄'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀區(qū)金沙江路 1517 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀區(qū)金沙江路 1519 弄'
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀區(qū)金沙江路 1516 弄'
                    }],
                }
            }
        })
    </script>

效果如圖所示：


image.png

2、第三方組件iview

官方文檔：http://v1.iviewui.com/
iView，是一套基于 Vue.js 的開源 UI 組件庫，主要服務(wù)于 PC 界面的中后臺產(chǎn)品。

組件特性：

  • 豐富的組件和功能，滿足絕大部分網(wǎng)站場景
  • 提供開箱即用的 Admin 系統(tǒng) 和 高階組件庫，極大程度節(jié)省開發(fā)成本
  • 提供專業(yè)、優(yōu)質(zhì)的一對一技術(shù)支持
  • 友好的 API ，自由靈活地使用空間
  • 細(xì)致、漂亮的 UI
  • 事無巨細(xì)的文檔
  • 可自定義主題
    （1）先引入iview組件的樣式
  <link rel="stylesheet" >

（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"  />
<!-- 引入 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="內(nèi)容" />
        <van-cell title="單元格" value="內(nèi)容" 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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容