前端复习Vue-父子组件通信问题!

·  阅读 251

2021年应届生秋招即将拉开帷幕,我也在这里开始分享我的日常复习了。欢迎同学们添加我的微信:hlf2020f


一、父组件向子组件传值


子组件是无法直接获得父组件的值的,需要通过propos来获得,你肯定有很多疑问,难道直接写就行吗,首先我们需要让子组件知道父组件的值!

1.props(父向子传值)

parent.vue

<template>
  <div>
    <h4>这里是父组件</h4>
    <p v-for="item in products">{{item.productName}}:{{item.productPrice}}</p>
    <Child :products="products">111</Child>
<!--    子组件是没有办法直接获得父组件的值的,他需要子组件声明一个动态的值来接收这个父组件的值-->

<!--    <router-link to="/child">child</router-link>-->
<!--    <router-view></router-view>-->
  </div>
</template>

<script>
  import Child from "./Child";
    export default {
        name: "Parent.vue",
        data(){
            return{
             products:[
                 {
                     productName:'衣服',
                     productCount:20,
                     productPrice: 100
                 },
                 {
                     productName:'裤子',
                     productCount:30,
                     productPrice:120
                 },
                 {
                     productName:'鞋',
                     productCount:'40',
                     productPrice:150
                 },
                 {
                     productName:'帽子',
                     productCount:'5',
                     productPrice:200
                 }
             ]

            }
        },
        components:{
         Child
        },
    }
</script>

<style scoped>

</style>复制代码
child.vue

<template>
  <div>
    <h5>这里是子组件</h5>
    <button @click="Btn">传值按钮</button>
    <!--父组件想要获得子组件的值需要通过一个事件来获得-->
    <ul>
      <li v-for="item  in products ">{{item.productName}}:{{item.productPrice}}</li>

    </ul>
  </div>

</template>

<script>
    export default {
        name: "Child",
        data(){
            return{
                msg:this.products, //通过这种方式子组件就可以用父组件中的数据了
                message:{
                    productName:'发饰',
                    productCount:15,
                    productPrice:10
                }
            }

        },
        props:{
           products:Array
        },
        // watch:{
        //     products:function (val) {
        //         this.msg = val
        //     }
        // }
    }
</script>

<style scoped>

</style>复制代码

关于child.vue中的watch方法,很多网友在自己的博客中说子组件在data中即使使用了props中的数据,当props更新时,子组件是没办法获取的,需要watch,但是我试了以下是可以的,希望知道我疑问的网友可以给予解答。

2.父组件向子组件传值($parent)

这种方式并不需要声明一个让子组件知道的值,直接利用$parent这个API就可以。

$root 和 $parent 都能够实现访问父组件的属性和方法,两者的区别在于,如果存在多级子组件,通过parent 访问得到的是它最近一级的父组件,通过root 访问得到的是根父组件(App.vue) 所以存在组件嵌套的情况下 不要使用 $root

parent.vue

<template>
  <div>
    <h4>这里是父组件</h4>
    <p v-for="item in products">{{item.productName}}:{{item.productPrice}}</p>
    <Child>111</Child>
<!--    子组件是没有办法直接获得父组件的值的,他需要子组件声明一个动态的值来接收这个父组件的值-->

<!--    <router-link to="/child">child</router-link>-->
<!--    <router-view></router-view>-->
  </div>
</template>

<script>
  import Child from "./Child";
    export default {
        name: "Parent.vue",
        data(){
            return{
             products:[
                 {
                     productName:'衣服',
                     productCount:20,
                     productPrice: 100
                 },
                 {
                     productName:'裤子',
                     productCount:30,
                     productPrice:120
                 },
                 {
                     productName:'鞋',
                     productCount:'40',
                     productPrice:150
                 },
                 {
                     productName:'帽子',
                     productCount:'5',
                     productPrice:200
                 }
             ]

            }
        },
        components:{
         Child
        },


    }
</script>

<style scoped>

</style>复制代码
child.vue

<template>
  <div>
    <h5>这里是子组件</h5>
<!--    <button @click="Btn">传值按钮</button>-->
    <!--父组件想要获得子组件的值需要通过一个事件来获得-->
    <button @click="Btn">接收父组件传过来的值</button>
    <ul>
      <li v-for="item  in msg ">{{item.productName}}:{{item.productPrice}}</li>

    </ul>
  </div>

</template>

<script>
    export default {
        name: "Child",
        data(){
            return{
                msg:[],
                message:{
                    productName:'发饰',
                    productCount:15,
                    productPrice:10
                }
            }

        },

        methods:{
             Btn(){
                  this.msg = this.$parent.products ;
               }
        },
        // watch:{
        //     products:function (val) {
        //         this.msg = val
        //     }
        // }
    }
</script>

<style scoped>

</style>复制代码

二、子向父(父组件获取子组件的值和方法)

1.$emit

parent.vue

<template>
  <div>
    <h4>这里是父组件</h4>
    <Child @parent = 'Fbtn'></Child>
    <p @click="Fbtn">查看父组件传值后的数据</p>
    <p v-if="flag" v-for="item in products">{{item.productName}}:{{item.productPrice}}</p>

<!--    子组件是没有办法直接获得父组件的值的,他需要子组件声明一个动态的值来接收这个父组件的值-->

<!--    <router-link to="/child">child</router-link>-->
<!--    <router-view></router-view>-->
  </div>
</template>

<script>
  import Child from "./Child";
    export default {
        name: "Parent.vue",
        data(){
            return{
                flag:false,
             products:[
                 {
                     productName:'衣服',
                     productCount:20,
                     productPrice: 100
                 },
                 {
                     productName:'裤子',
                     productCount:30,
                     productPrice:120
                 },
                 {
                     productName:'鞋',
                     productCount:'40',
                     productPrice:150
                 },
                 {
                     productName:'帽子',
                     productCount:'5',
                     productPrice:200
                 }
             ]

            }
        },
        methods:{
            Fbtn(data){
                this.products.push(data);
                this.flag = true
            }
        },
        components:{
         Child
        },


    }
</script>

<style scoped>

</style>复制代码
child.vue

<template>
  <div>
    <h5>这里是子组件</h5>
    <button @click="Btn">向父组件传值按钮</button>
    <!--父组件想要获得子组件的值需要通过一个事件来获得-->
<!--    <ul>-->
<!--      <li v-for="item  in msg ">{{item.productName}}:{{item.productPrice}}</li>-->

<!--    </ul>-->
  </div>

</template>

<script>
    export default {
        name: "Child",
        data(){
            return{
                msg:[],
                message:{
                    productName:'发饰',
                    productCount:15,
                    productPrice:10
                }
            }

        },

        methods:{
             Btn(){
                 this.$emit('parent',this.message)
               }
        },
        // watch:{
        //     products:function (val) {
        //         this.msg = val
        //     }
        // }
    }
</script>

<style scoped>

</style>
复制代码

2.$ref

parent.vue

<template>
  <div>
    <h4>这里是父组件</h4>
    <Child ref="child"></Child>
    <p @click="Fbtn">查看父组件传值后的数据</p>
    <p v-if="flag" v-for="item in products">{{item.productName}}:{{item.productPrice}}</p>

<!--    子组件是没有办法直接获得父组件的值的,他需要子组件声明一个动态的值来接收这个父组件的值-->

<!--    <router-link to="/child">child</router-link>-->
<!--    <router-view></router-view>-->
  </div>
</template>

<script>
  import Child from "./Child";
    export default {
        name: "Parent.vue",
        data(){
            return{
                flag:false,
             products:[
                 {
                     productName:'衣服',
                     productCount:20,
                     productPrice: 100
                 },
                 {
                     productName:'裤子',
                     productCount:30,
                     productPrice:120
                 },
                 {
                     productName:'鞋',
                     productCount:'40',
                     productPrice:150
                 },
                 {
                     productName:'帽子',
                     productCount:'5',
                     productPrice:200
                 }
             ]

            }
        },
        methods:{
            Fbtn(){
                this.products.push(this.$refs.child.message)
                this.flag = true
            }
        },
        components:{
         Child
        },


    }
</script>

<style scoped>

</style>复制代码
child.vue

<template>
  <div>
    <h5>这里是子组件</h5>
<!--    <button @click="Btn">传值按钮</button>-->
    <!--父组件想要获得子组件的值需要通过一个事件来获得-->
<!--    <ul>-->
<!--      <li v-for="item  in msg ">{{item.productName}}:{{item.productPrice}}</li>-->

<!--    </ul>-->
  </div>

</template>

<script>
    export default {
        name: "Child",
        data(){
            return{
                msg:[],
                message:{
                    productName:'发饰',
                    productCount:15,
                    productPrice:10
                }
            }

        },

        methods:{
             Btn(){
                  this.msg = this.$parent.products ;
               }
        },
        // watch:{
        //     products:function (val) {
        //         this.msg = val
        //     }
        // }
    }
</script>

<style scoped>

</style>复制代码

3.$children

$children这个api获取的子组件的一组数组,也就是这个数组里包括你使用的所有子组件

parent.vue

<template>
  <div>
    <h4>这里是父组件</h4>
    <Child ></Child>
    <p @click="Fbtn">查看父组件传值后的数据</p>
    <p v-if="flag" v-for="item in products">{{item.productName}}:{{item.productPrice}}</p>

<!--    子组件是没有办法直接获得父组件的值的,他需要子组件声明一个动态的值来接收这个父组件的值-->

<!--    <router-link to="/child">child</router-link>-->
<!--    <router-view></router-view>-->
  </div>
</template>

<script>
  import Child from "./Child";
    export default {
        name: "Parent.vue",
        data(){
            return{
                flag:false,
             products:[
                 {
                     productName:'衣服',
                     productCount:20,
                     productPrice: 100
                 },
                 {
                     productName:'裤子',
                     productCount:30,
                     productPrice:120
                 },
                 {
                     productName:'鞋',
                     productCount:'40',
                     productPrice:150
                 },
                 {
                     productName:'帽子',
                     productCount:'5',
                     productPrice:200
                 }
             ]

            }
        },
        methods:{
            Fbtn(){
                this.products.push(this.$children[0].message)
                this.flag = true
            }
        },
        components:{
         Child
        },


    }
</script>

<style scoped>

</style>复制代码
child.vue

<template>
  <div>
    <h5>这里是子组件</h5>
<!--    <button @click="Btn">传值按钮</button>-->
    <!--父组件想要获得子组件的值需要通过一个事件来获得-->
<!--    <ul>-->
<!--      <li v-for="item  in msg ">{{item.productName}}:{{item.productPrice}}</li>-->

<!--    </ul>-->
  </div>

</template>

<script>
    export default {
        name: "Child",
        data(){
            return{
                msg:[],
                message:{
                    productName:'发饰',
                    productCount:15,
                    productPrice:10
                }
            }

        },

        methods:{
             Btn(){
                  this.msg = this.$parent.products ;
               }
        },
        // watch:{
        //     products:function (val) {
        //         this.msg = val
        //     }
        // }
    }
</script>

<style scoped>

</style>复制代码


分类:
阅读
标签:
分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改