Vue.js——组件间数据的传递（一）

最新推荐文章于 2024-07-23 14:29:05 发布

一生ea

最新推荐文章于 2024-07-23 14:29:05 发布

阅读量259

点赞数

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

本文链接：https://blog.csdn.net/weixin_39006917/article/details/108252857

版权

本文详细介绍了Vue.js中组件间数据的传递方法，包括父子组件间的数据传递和非父子组件间的通信。对于父子组件，讲解了父向子通过属性绑定和数据拦截，以及子向父通过事件监听和事件触发的传递方式。对于非父子组件，提到了祖先向后代的依赖注入，以及相邻组件间使用中央事件总线Event Bus进行通信的方法。

摘要由CSDN通过智能技术生成

页面组件的关系结构，是一个由许多组件构成的树状结构，组件间存在着两种关系：父子关系、非父子关系。几乎任意类型的应用界面都可以抽象为一个组件树。

组件间的父子关系指的组件树中由线直接相连的两个组件间的关系，其余关系一律归为非父子关系。

一、父子组件间数据传递

1.父向子传递数据

父组件调用子组件时，以属性绑定的方式将要传递的数据绑定在子组件标签上。
在子组件对象中，使用props选项声明获取的数据，进行绑定属性的拦截，即接收来自父组件的数据。

方式：属性绑定+数据拦截

首先，定义父组件hello和子组件world，父组件中数据变量名是msg、name、age，子组件中变量名是message、name、age。在父组件hello中调用子组件时，以“:子组件数据="父组件数据"”的方式进行属性绑定。

<template id="hello">
        <div>
            <h3>我是hello父组件</h3>  
            <h3>访问自己的数据：{
  {msg}},{
  {name}},{
  {age}}</h3> 
            <hr>
            <!-- 属性绑定方式 -->
            <my-world :message="msg" :name="name" :age="age"></my-world>
        </div>
 </template>

然后，在子组件对象中的props选项中声明获取的数据，进行属性拦截。

   components:{
        'my-hello':{
            template:'#hello',
       		data(){
                return {
                    msg:xx,
                    name:xx,
                    age:xx,
                }
            },
            components:{
                'my-world':{
                    template:'#world',
                    /