Vue——组件（2）

好看的网页千篇一律，有趣的代码万里挑一。

编辑代码就像创作艺术，享受个过程，最后得到心满意足的结果。

今天继续一起学习Vue组件——父子组件、第三方组件。

---

父子组件

   

       

app

       

姓名：{{name}}，年龄：{{age}}

        修改b-one的汽车

        修改b-two的飞机

       

       

           

       

       

   

    // 定义b-one组件

    Vue.component('b-one', {

    // 组件的模板中，只有包含一个根标签，

    // 注意：定义插槽后才能嵌套子组件

    template:`

   

       

b-one

       

{{car}}

       

App----姓名：{{myname}}，年龄：{{myage}}

       

   

    `,

    data() {

    return {

    car:{

    name:'奔驰',

    price:'50W'

    }

    }

    },

    computed:{

    myname(){

    // $parent获取父组件的实例

    return this.$parent.name

    },

    myage(){

    return this.$parent.age

    }

    },

    created() {

    console.log('b-one----created');

    },

    mounted() {

    console.log('b-one----mounted');

    },

    })

    // 定义b-two组件

    Vue.component('b-two', {

    template:`

   

       

b-two

       

{{plane}}

   

    `,

    data() {

    return {

    plane:{

    name:'波音747',

    price:'20亿'

    }

    }

    },

    })

    // 定义b-three组件

    Vue.component('b-three', {

    template:`

   

       

b-three

       

App----姓名：{{name}}，年龄：{{age}}

   

    `,

    computed:{

    name(){

    // 通过$parent还可以继续获取它的父级组件

    return this.$parent.$parent.name

    },

    age(){

    // $root获取根组件

    return this.$root.age

    }

    },

    created() {

    console.log('b-three----created');

    },

    mounted() {

    console.log('b-three----mounted');

    },

    })

    // 创建vue实例

    new Vue({

    el:'#app',

    // 注意观察：在父组件创建完成到挂载完成之间，包含完整的子组件的生命周期

    created() {

    console.log('app----created');

    },

    mounted() {

    console.log('app----mounted');

    // 根据组件在页面中的顺序返回所有的组件

    console.log(this.$children);

    // 返回所有带有ref属性的组件

    console.log(this.$refs);

    },

    data() {

    return {

    name:'张三',

    age:20

    }

    },

    methods: {

    //修改汽车的方法

    updateCar(){

    // $children获取的是所有子组件的实例，返回的是数组类型，再通过下标获取指定的子组件

    // 如果页面的结构出现了调整，这里获取的具体的组件可以就对不上号了。

    /* this.$children[0].car = {

    name:'宝马',

    price:'40W'

    } */

    // $refs对象中，保存着所有添加了ref属性的组件实例

    this.$refs.one.car = {

    name:'宝马',

    price:'40W'

    }

    },

    // 修改飞机的方法

    updatePlane(){

    /* this.$children[1].plane = {

    name:'长征2号',

    price:'30亿'

    } */

    this.$refs.two.plane = {

    name:'长征2号',

    price:'30亿'

    }

    }

    },

    })

第三方组件库

1. Element——网站快速成型工具

2.iview

3.Ant Design of Vue

4.移动端的 Vant

自定义表格组件--仿iview

 

       

       

---

       

   

    // 定义一个b-table组件

    Vue.component('b-table', {

        template:`

       

       

       

       

       

       

       

       

{{item.title}}
{{item[item2.key]}}

        `,

        // 定义组件标签上的属性，用于接收外部传给组件的数据

        props:['data','columns'],

    })

    // 创建vue实例

    new Vue({

        el:'#app',

        data() {

            return {

                // 表格的列数据

                columns1:[

                    {

                        title:'姓名',

                        key:'name'

                    },

                    {

                        title:'年龄',

                        key:'age'

                    },

                    {

                        title:'性别',

                        key:'sex'

                    },

                    {

                        title:'工资',

                        key:'money'

                    }

                ],

                // 表格数据

                data1:[{

                    name:'张三',

                    age:20,

                    sex:'男',

                    money:10000

                },{

                    name:'李四',

                    age:22,

                    sex:'女',

                    money:20000

                },{

                    name:'王五',

                    age:24,

                    sex:'女',

                    money:30000

                }],

                columns2:[

                    {

                        title:'编号',

                        key:'id'

                    },

                    {

                        title:'车名',

                        key:'name'

                    },

                    {

                        title:'产地',

                        key:'address'

                    },

                ],

                // 表格数据2

                data2:[{

                    id:'1001',

                    name:'奔驰',

                    address:'德国'

                },{

                    id:'1002',

                    name:'红旗',

                    address:'中国'

                },{

                    id:'1003',

                    name:'捷豹',

                    address:'英国'

                }]

            }

        },

    })

 自定义表格组件--仿element-ui

 

       

           

           

           

           

       

       

---

       

           

           

           

       

   

  // 定义一个b-table-column组件

    Vue.component('b-table-column', {

        template:`

        {{label}}

        `,

        props:['prop','label'],

        mounted() {

            // 子组件挂载完成时，将获取到的属性的名称，添加到父组件的columns数组中。

            this.$parent.columns.push(this.prop)

        },

    })

    // 定义一个b-table组件

    Vue.component('b-table', {

        template:`

       

       

       

       

       

       

       

       

{{item[item2]}}

        `,

        // 定义组件标签上的属性，用于接收外部传给组件的数据

        props:['data'],

        data() {

            return {

                // 该数组存放属性的名称

                columns:[]

            }

        },

    })

    // 创建vue实例

    new Vue({

        el:'#app',

        data() {

            return {

                // 表格数据

                data1:[{

                    name:'张三',

                    age:20,

                    sex:'男',

                    money:10000

                },{

                    name:'李四',

                    age:22,

                    sex:'女',

                    money:20000

                },{

                    name:'王五',

                    age:24,

                    sex:'女',

                    money:30000

                }],

                // 表格数据2

                data2:[{

                    id:'1001',

                    name:'奔驰',

                    address:'德国'

                },{

                    id:'1002',

                    name:'红旗',

                    address:'中国'

                },{

                    id:'1003',

                    name:'捷豹',

                    address:'英国'

                }]

            }

        },

    })