Vue基础语法（四）

最新推荐文章于 2023-12-31 19:25:26 发布

五秒法则

最新推荐文章于 2023-12-31 19:25:26 发布

阅读量676

点赞数 3

分类专栏： vue2 文章标签： vue.js vue javascript

本文链接：https://blog.csdn.net/qq_51478745/article/details/127495034

版权

vue2 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一、父组件向子组件通信

1、数组

（1）例一：选择城市，父组件的数据传递给子组件去显示

编写思路：

①通过v-for建立父组件，并绑定click点击事件传参获取城市

②定义一个city变量，存储获取的城市

③通过props:[]，自定义动态绑定名

④同时在父与子关联的cpn标签，进行v-bind动态绑定将父组件的变量city值传递给子组件自定义绑定名，子组件就可以直接通过使用自定义绑定名，直接显示父组件传递的城市

<body>
    <div id="app">
        <ul>
            <li @click="btnClick(item,index)" v-for="(item,index) in cityArr">{{item}}</li>
        </ul>
        <cpn :show-city="city"></cpn>
    </div>
    <template id="cpn">
        <div>
            <h1>{{msg}}</h1>
            <h2>{{showCity}}</h2>
        </div>
    </template>
    <script>
        new Vue({
            el:'#app',
            data:{
                cityArr:['上海','重庆','天津','北京'],
                city:'未选择城市'
            },
            methods:{
                btnClick(item,index){
                    console.log(item,index);
                    this.city = item
                },
            },
            components:{
                cpn:{
                    template:'#cpn',
                    data(){
                        return {
                            msg:'我是子组件',
                        }
                    },
                    props:['showCity'],
                }
            }
        })
    </script>
</body>

（2）例二：标题内容

<body>
    <div id="app">
        <cpn :title-name="title" :text="content"></cpn>
    </div>
    <template id="cpn">
        <div>
            <h1>{{titleName}}</h1>
            <h3>{{text}}</h3>
        </div>
    </template>
    <script>
        new Vue({
            el:'#app',
            data:{
                title:'父组件的标题',
                content:'父组件的内容'
            },
            components:{
                cpn:{
                    template:'#cpn',
                    props:['titleName','text']
                }
            }
        })
    </script>
</body>

2、对象（建议用这种，更严谨）

（1）例一：选择城市

<body>
    <div id="app">
        <ul>
            <li @click="citySelect(item,index)" v-for="(item,index) in cityArr">{{item}}</li>
        </ul>
        <cpn :show-city="city"></cpn>
    </div>
    <template id="cpn">
        <div>
            <h1>我是子组件</h1>
            <h3>{{showCity}}</h3>
        </div>
    </template>
    <script>
        new Vue({
            el:'#app',
            data:{
                cityArr:['重庆','北京','天津','上海'],
                city:'未选择城市',
            },
            methods:{
                citySelect(item,index){
                    console.log(item,index);
                    this.city = item
                }
            },
            components:{
                cpn:{
                    template:'#cpn',
                    props:{
                        showCity:{
                            type:String,
                            default(){
                                return '未选择城市'
                            },
                        }
                    },
                },
            },

        })
    </script>
</body>

（2）例二：标题内容

<body>
    <div id="app">
        <cpn :title-name="title" :text="content"></cpn>
    </div>
    <template id="cpn">
        <div>
            <h1>{{titleName}}</h1>
            <h3>{{text}}</h3>
        </div>
    </template>
    <script>
        new Vue({
            el:'#app',
            data:{
                title:'父组件标题',
                content:'父组件内容',
            },
            components:{
                cpn:{
                    template:'#cpn',
                    props:{
                        titleName:{
                            type:String,
                            default(){
                                return '默认'
                            }
                        },
                        text:{
                            type:String,
                            default(){
                                return '默认'
                            }
                        },
                    },
                },
            },
        })
    </script>
</body>

（3）注意：

①标签内无法正常识别大小写，通过v-bind动态绑定的属性要注意驼峰改成-格式

②传输的数据类型要一致，否则用对象严谨的方法会报错

二、子组件向父组件通信

1、自定义方法

（1）格式：this.$emit('自定义方法名',参数1,参数2....)

（2）要求方法名用name-name的形式

2、选择城市

<body>
    <div id="app">
        <h1>{{showCity}}</h1>
        <cpn @city-transfor="getCity"></cpn>
    </div>
    <template id="cpn">
        <div>
            <h1>我是子组件</h1>
            <button @click="btnClick">城市传递</button>
        </div>
    </template>
    <script>
        new Vue({
            el:'#app',
            data:{
                showCity:'未选择城市'
            },
            methods:{
                getCity(city){
                    console.log(city);
                    this.showCity = city
                }
            },
            components:{
                cpn:{
                    template:'#cpn',
                    data(){
                        return {
                            city:{
                                name:'北京'
                            }
                        }
                    },
                    methods:{
                        btnClick(){
                            this.$emit('city-transfor',this.city.name)
                        }
                    }
                },
            }, 
        })
    </script>
</body>

三、父组件访问子组件

1、this.$children：返回的是数组

（1）方法使用

<body>
    <div id="app">
        <cpn></cpn>
        <button @click="getChild">访问子组件</button>
    </div>
    <template id="cpn">
        <div>
            <h1>{{msg}}</h1>
        </div>
    </template>
    <script>
        new Vue({
            el:'#app',
            methods:{
                getChild(){
                    console.log(this.$children);
                },
            },
            components:{
                cpn:{
                    template:'#cpn',
                    data(){
                        return {
                            msg:'我是子组件'
                        }
                    },
                }
            },
        })
    </script>
</body>

（2）获取具体值

<script>
    new Vue({
        el:'#app',
        methods:{
            getChild(){
                console.log(this.$children[0].msg);
            },
        },
        components:{
            cpn:{
                template:'#cpn',
                data(){
                    return {
                        msg:'我是子组件'
                    }
                },
            },
        },
    })
</script>

（3）方法缺点举例

①当有多个子组件时，该方法无法访问具体某个子组件的内容

<body>
    <div id="app">
        <cpn2></cpn2>
        <cpn1></cpn1>
        <button @click="getChild">访问子组件</button>
    </div>
    <template id="cpn1">
        <div>
            <h1>{{msg}}</h1>
        </div>
    </template>
    <template id="cpn2">
        <div>
            <h1>{{str}}</h1>
        </div>
    </template>
    <script>
        new Vue({
            el:'#app',
            methods:{
                getChild(){
                    console.log(this.$children[0].msg);
                },
            },
            components:{
                cpn1:{
                    template:'#cpn1',
                    data(){
                        return {
                            msg:'我是子组件1'
                        }
                    },
                },
                cpn2:{
                    template:'#cpn2',
                    data(){
                        return {
                            str:'我是子组件2'
                        }
                    },
                },
            },
        })
    </script>
</body>

2、this.$refs：返回的是对象

注意：使用该方法时要与ref属性搭配，且这个方法可以避免什么数组出现的问题

<body>
    <div id="app">
        <cpn2 ref="cpn2"></cpn2>
        <cpn1 ref="cpn1"></cpn1>
        <button @click="getChild">访问子组件</button>
    </div>
    <template id="cpn1">
        <div>
            <h1>{{msg}}</h1>
        </div>
    </template>
    <template id="cpn2">
        <div>
            <h1>{{str}}</h1>
        </div>
    </template>
    <script>
        new Vue({
            el:'#app',
            methods:{
                getChild(){
                    console.log(this.$refs);
                },
            },
            components:{
                cpn1:{
                    template:'#cpn1',
                    data(){
                        return {
                            msg:'我是子组件1'
                        }
                    },
                },
                cpn2:{
                    template:'#cpn2',
                    data(){
                        return {
                            str:'我是子组件2'
                        }
                    },
                },
            },
        })
    </script>
</body>

四、子组件访问父组件

1、this.$parent：返回的是对象

<body>
    <div id="app">
        <cpn></cpn>
    </div>
    <template id="cpn">
        <div>
            <h1>我是子组件</h1>
            <button @click="getFather">访问父组件</button>
        </div>
    </template>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'我是父组件',
            },
            components:{
                cpn:{
                    template:'#cpn',
                    methods:{
                        getFather(){
                            console.log(this.$parent);
                        },
                    },
                },
            },
        })
    </script>
</body>