十日谈 :Vue 中的组件交互

最新推荐文章于 2023-02-06 09:50:11 发布

扔猿太膻

最新推荐文章于 2023-02-06 09:50:11 发布

阅读量143

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_36013952/article/details/114838590

版权

前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

十日谈 :Vue 中的组件交互

欢迎阅读我的Vue学习日记

欢迎阅读我的Vue学习日记

父子组件交互

首先记住props属性传递的是单向数据流
父组件定义

<body>
    <div id="app">
        <div>{{pmsg}}</div>
    </div>
    <script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            pmsg:'父级组件中的内容'
        }
    });
</script>
</body>

注册子组件，注意props的定义
这个例子是父组件向子组件传送数据

<body>
    <div id="app">
        <div>{{pmsg}}</div>
        <menu-item title='来自父组件的值'></menu-item>
    </div>
    <script src="vue.js"></script>
<script>
    Vue.component('menu-item',{
        props:['title'],
        data:function(){
            return{
                msg:'子组件本身的数据'
            }
        },
        template:'<div>{{msg + "-------------" + title}}</div>'
    });
    var vm = new Vue({
        el:'#app',
        data:{
            pmsg:'父级组件中的内容'
        }
    });
</script>
</body>

总结

1.组件内部通过props接受传递过来的值

Vue.component('menu-item',{
        props:['title'],
        template:'<div>{{title}}</div>'
    });

2.父组件通过属性将值传递给子组件

<menu-item title='来自父组件的值'></menu-item>
<menu-item :title='title'></menu-item>

子组件向父组件传值

在这里插入图片描述

兄弟组件交互

兄弟组件交互依靠的是单独的事件中心管理组件间的通信
如图所示：
在这里插入图片描述

扔猿太膻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十日谈 :Vue 中的组件交互

十日谈 :Vue 中的组件交互欢迎阅读我的Vue学习日记父子组件交互总结子组件向父组件传值兄弟组件交互欢迎阅读我的Vue学习日记父子组件交互首先记住props属性传递的是单向数据流父组件定义<body> <div id="app"> <div>{{pmsg}}</div> </div> <script src="vue.js"></script><script>
复制链接

扫一扫

专栏目录