一、父子组件传值

1、父传子

$parent：可以获取父组件的实例，还可以继续获取它的父级组件。

parent.root.house)

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

// Child1组件
Vue.component('Child1', {
    // 通过$parent返回的是父组件对象
    template: `
      <div class="child1">
        <h3>房产信息</h3>
         <p>{{$parent.house.address}}</p>
         <p>{{$parent.house.size}}</p>
         <Childson></Childson>
      </div>
    `
})
// childSon组件
Vue.component('Childson',{
    // $parent获取父组件对象；$root获取根组件对象
    template:`
        <div class="childSon">
            <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>
    `
})
// 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: '朝阳区朝阳山庄6栋3单元101',
            size: '150平'
        },
        car: {
            name: '奔驰S400',
            color: '黑色'
        },
        money: {
            value: '150W',
            bank: '中国建设银行'
        }
    }
})

2、子传父

children；否则用refs：返回的是一个对象，对象中包含所有带有ref属性的子组件。 注意：不是只有组件才可以添加ref属性，任何标签都可以加ref属性 。

<div id="app">
    <!-- 给组件标签，添加ref属性，可以通过$refs对象获取 -->
    <Child1 ref="son1"></Child1>
    <Child2 ref="son2"></Child2>
    <Child3 ref="son3"></Child3>
    <div class="son">
        <h3>大儿子</h3>
        <p>姓名：{{son1.name}}</p>
        <p>年龄：{{son1.age}}</p>
    </div>
    <div class="son">
        <h3>二儿子</h3>
        <p>姓名：{{son2.name}}</p>
        <p>年龄：{{son2.age}}</p>
    </div>
    <div class="son">
        <h3>小儿子</h3>
        <p>姓名：{{son3.name}}</p>
        <p>年龄：{{son3.age}}</p>
    </div>
</div>

// Child1组件
Vue.component('Child1', {
    // 通过$parent返回的是父组件对象
    template:`
        <div class="child1">
            <h3>房产信息</h3>
            <p>{{$parent.house.address}}</p>
            <p>{{$parent.house.size}}</p>
            <Childson></Childson>
        </div>
    `,
    data() {
        return {
            name:'张远',
            age:25
        }
    }
})

// childSon组件
Vue.component('Childson',{
    // $parent获取父组件对象
    // $root获取根组件对象
    template:`
        <div class="childSon">
            <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>
    `
})

// Child2组件
Vue.component('Child2', {
    template:`
        <div class="child2">
            <h3>汽车信息</h3>
            <p>{{$parent.car.name}}</p>
            <p>{{$parent.car.color}}</p>
        </div>
    `,
    data() {
        return {
            name:'张飞',
            age:23
        }
    }
})

Vue.component('Child3', {
    template:`
        <div class="child3">
            <h3>存款信息</h3>
            <p>{{$parent.money.value}}</p>
            <p>{{$parent.money.bank}}</p>
        </div>
    `,
    data() {
        return {
            name:'张强',
            age:20
        }
    }
})

// 暂且将#app对应的内容当成根组件
new Vue({
    el:'#app',
    //数据
    data:{
        house:{
            address:'名城世家3栋1单元1101室',
            size:'150平米'
        },
        car:{
            name:'奔驰S400',
            color:'黑色'
        },
        money:{
            value:'150W',
            bank:'中国建设银行'
        },
        //接收子组件的数据的对象
        son1:{
            name:'',
            age:0
        },
        son2:{
            name:'',
            age:0
        },
        son3:{
            name:'',
            age:0
        }
    },
    mounted() {
        // $children返回的是所有子组件对象的数组
        // 如果页面的结构出现了调整，这里获取的具体的组件下标就对不上号了。
        // console.log(this.$children);
        /* this.son1.name = this.$children[0].name
        this.son1.age = this.$children[0].age
        this.son2.name = this.$children[1].name
        this.son2.age = this.$children[1].age
        this.son3.name = this.$children[2].name
        this.son3.age = this.$children[2].age */

        // $refs返回的是一个对象，对象中包含所有带有ref属性的组件
        // console.log(this.$refs);
        this.son1.name = this.$refs.son1.name
        this.son1.age = this.$refs.son1.age
        this.son2.name = this.$refs.son2.name
        this.son2.age = this.$refs.son2.age
        this.son3.name = this.$refs.son3.name
        this.son3.age = this.$refs.son3.age
    }
})

二、第三方组件

1、element-ui组件库

官网地址：https://element.eleme.cn/#/zh-CN/component/tabs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用的第三方组件库</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <div>
            <el-button type="primary">主要按钮</el-button>
            <el-checkbox label="复选框 A"></el-checkbox>
            <span class="demonstration">默认</span>
            <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <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>
            
        </div>
    </div>
    <script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js'></script>
    <!-- 第三方的组件库，必须在vue的下面引入 -->
    <!-- 引入element-vi组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el: '#app',
            data() {
                return {
                    pickerOptions: {
                        shortcuts: [{
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }]
                    },
                    value1: '',
                    value2: '',
                    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>
</body>

</html>

2、iview组件库

官网地址：http://v1.iviewui.com/docs/guide/install

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三方组件库iview</title>
    <!-- 引入view的样式 -->
    <link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
</head>
<body>
    <div id="app">
        <i-button type="primary">Primary</i-button>
        
    </div>
    <!-- 引入vue -->
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <!-- 引入view -->
    <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            
        })
    </script>
</body>
</html>

3、Vant组件库

官网地址：https://vant-contrib.gitee.io/vant/#/zh-CN/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三方组件库Vant</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
</head>

<body>
    <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-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
    </div>
    <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>
    <script>
        new Vue({
            el:'#app',
        })
    </script>
</body>
</html>