Vue的父子组件通信

最新推荐文章于 2024-09-19 13:43:38 发布

张可盐

最新推荐文章于 2024-09-19 13:43:38 发布

阅读量136

点赞数 1

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

本文链接：https://blog.csdn.net/qq_44091773/article/details/112790151

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前言

Vue的组件注册

在上个文章中介绍了组件的注册，包括局部注册和全局注册。这里将介绍父子组件以及父子组件之间的通信方式。

父子组件

父子组件，顾名思义就是在组件中套用组件形成父子关系，一个简单的实例如下：

<body>
<div id="app">
    <father> </father>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        components:{
            father:{
                template:`
                    <div>
                        <h1>父组件</h1>
                        <child></child>
                    </div>`,
                components: {
                child:{
                    template:`<h1>子组件</h1>`
                }
                }
            }
        }
    })
</script>
</body>

如上就是定义了一个最简单的父子组件，之前说到实例就是组件，所以组件中也可以声明实例中有的对象属性。定义父子对象比较简单，接下来就说一下父子组件怎么传递数据。

父子组件传递数据

首先介绍一个属性props，它是一个数组，作用就是接收传进来的值：

<body>
<div id="app">
    <father title="这里是标签"> </father>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        components:{
            father:{
                props:["title"],
                template:`
                    <div>
                        <h1>父组件</h1>
                        <h1>{{title}}</h1>
                        <child></child>
                    </div>`
                }
            }
        }
    })
</script>
</body>

<!--
渲染效果：
父组件
这里是标签
-->

我们直接在组件标签中中声明了一个变量用来接收值，同时用props进行接收，最后可以直接应用在Vue支持的语法上。虽然只是传递了字符串，事实上它可以传递JavaScript所以类型。和组件的命名格式一样，在JavaScript中可以使用“驼峰命名”，但是在html中需要使用短横线命名，模板字符串除外。
像这样，我们已经知道了可以像这样给 prop 传入一个静态的值：

<father title="这里是标签"> </father>

prop 也可以通过 v-bind 动态赋值，例如：

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>

我们知道了动态传值后，剩下的就好办了，因为父子组件传值依赖 v-bind 动态赋值：

new Vue({
    el: '#app',
    components:{
        father:{
            data(){
                return{
                    msg:"白月光与朱砂痣"
                }
            }
            template:`
                <div>
                    <h1>父组件</h1>
                    <child :msg="msg"></child>
                </div>`,
            components: {
                child:{
                    props:["msg"],
                    template:`<h1>子组件{{msg}}</h1>`
                }
            }
        }
    }
})

如上所示，首先在father组件中定义了msg数据，之后用动态传值的方式绑定到子组件，接着用 props 接收这个传过来了参数，最后在插值语法中渲染。

父子组件传递方法

new Vue({
    el: '#app',
    components:{
        father:{
           data(){
              return {
                  msg:""
              }
            },
	        methods:{
               fatherFunction(value) {
                   this.msg=value
                   alert("白月光与朱砂痣"+value)
               }
             },
            template:`
                <div>
                    <h1>父组件 {{msg}}</h1>
                    <child @father-function="fatherFunction"></child>
                </div>`,
            components: {
                child:{
                    template:`<h1 @click="childFunction">子组件</h1>`,
                    methods:{
                        childFunction(){
                            this.$emit("father-function","，你想起她的好")
                        }
                    }
                }
            }
        }
    }
})

在上面中主要实现了两个功能，一个是把父组件的方法传递给子组件，另一个就是把子组件的数据传递给父组件。
在传递方法的时候，对属性需要使用v-on进行指定，不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用“驼峰命名”了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到，所以记性传递的时候推荐使用短横线命名，“驼峰命名”不会起到作用的。
传递给子组件之后，需要子组件另定义一个方式，在子组件中的方法通过this.$emit("事件名")"进行调用。第一个参数是方法名，往后的参数是方法的属性了，这里传递了一个字符串，通过子组件调用父组件的方法把数据传递父组件data中的数据。