组件间的数据交互

最新推荐文章于 2023-10-21 18:27:56 发布

wanghuohuo1998

最新推荐文章于 2023-10-21 18:27:56 发布

阅读量277

点赞数

分类专栏： vue基础文章标签： vue

本文链接：https://blog.csdn.net/wanghuohuo1998/article/details/119011020

版权

vue基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

组件间的数据交互

父组件向子组件传值

父组件向子组件传值的方式有两种-父组件通过属性值向子组件传递数据

一种是动态的（可以与父组件的data进行绑定）

另外一种是静态的直接写死在属性中

子组件使用props进行接收，接收的时候注意是以数组的形式进行接收，因为传递的值可能不止一个

<body>
   <div id="app">
     <!-- 父组件向子组件传值 -->
     <!-- 静态的传值 -->
    <component-a title="父组件传过去的-静态"></component-a>
    <!-- 父组件向子组件传值-动态的 -->
    <!-- 注意//；模板中动态的使用data中的数据，加不加this效果一样，一般不加 -->
    <component-a :title1="father"></component-a>
   </div>
   <script>
    //  定义一个子组件
    var children = {
      // 子组件接收父组件传递过来的值
      props:['title','title1'],
      data(){
        return {
          msg:'你好世界'
        }
      },
      template:'<h3>{{msg+"-"+title+"-"+title1}}</h3>'
    }

    // 注册子组件
    new Vue({
      el:'#app',
      data(){
        return{
          father:'父组件传过去的-动态'
        }
      },
      components:{
        'component-a':children
      }
    })
   </script>
  
</body>

输出结果：

你好世界-父组件传过去的-静态-undefined

你好世界-undefined-父组件传过去的-动态

证明了组件的复用的时候组件之间是相互独立的，二者的实例化对象不同

注意：

props中的属性名称有一定的规则

在props中使用驼峰的形式，模板中需要使用短横线的方式

在props中使用的是字符串的形式，则在模板中也可以使用字符串的形式,可以都是用字符串的方式

<component-a title-abc="父组件传过去的-静态"></component-a>


    var children = {
      // 子组件接收父组件传递过来的值，其中模板中使用了短横线的方式，接收的时候使用驼峰
      props:['titleAbc','title1'],
      data(){
        return {
          msg:'你好世界'
        }
      },
      template:'<h3>{{msg+"-"+titleAbc+"-"+title1}}</h3>'
    }

静态的传值

也可以加上冒号，加上冒号表示是原始的数据类型，不加冒号的话会变成字符串类型的

props属性值的类型

字符型String 数组：Number 布尔值：true 数组;Array 对象：Object

子组件向父组件传值

1.子组件通过自定义事件的方式，项父组件传递消息

<button v-on:click="$emit("countSum")">计算</button>

2.父组件监听子组件的事件

<menu-item v-on:countSum="sum+=1"></menu-item>

完整代码如下

<body>
    <div id="app">
        <father></father>
    </div>
    <script>
        Vue.component('father', {
            template: '<div>我的儿子叫{{mySonName}}<son @tellMyFatherMyName="getMySonName"></son></div>',
            data() {
                return {
                    mySonName: ''
                }
            },
            methods: {
                //这里的data就是子组件向父组件传递的过程中携带的参数
                getMySonName(data) {
                    this.mySonName = data;
                }
            },
            components: {
                son: {
                    data() {
                        return {
                            myName: '小强'
                        }
                    },
                    //点击按钮，调用点击事件，点击事件触发子组件向父组件传值的操作
                    template: '<button @click="emitMyName">我叫{{myName}}</button>',
                    methods: {
                        emitMyName() {
                            // 子组件传值给父组件需要用到$emit()方法，这个方法可以传递两个参数，一个是事件名称，一个是需要传递的数据
                            this.$emit('tellMyFatherMyName', this.myName)
                        }
                    }
                }
            }

        })
        var vm = new new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

兄弟组件之间的传值

兄弟组件之间的传值，通过事件总线完成

<body>
    <div id="app">
        <father></father>
    </div>
    <script>
        // 创建一个空的vue实例，作为事件总线
        var eventbus = new Vue()
        Vue.component('father', {
            template: '<div><son></son><daughter></daughter></div>',
            components: {
                son: {
                    data() {
                        return {
                            mySisterName: ''
                        }
                    },
                    template: '<div>我妹妹叫{{mySisterName}}</div>',
                    mounted() {
                        // 通过eventbus的$on()方法去监听兄弟节点发射过来的事件
                        // $on有两个参数，一个是事件名称，一个是函数，该函数的默认值就是传递过来的数据
                        eventbus.$on('tellBroMyName', data => {
                            this.mySisterName = data
                        })
                    }
                },
                daughter: {
                    data() {
                        return {
                            myName: '小雪'
                        }
                    },
                    template: '<button @click="emitMyName">告诉哥哥我叫{{myName}}</button>',
                    methods: {
                        emitMyName() {
                            // 通过事件总线发射一个事件名称和需要传递的数据
                            eventbus.$emit('tellBroMyName', this.myName)
                        }
                    }
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>