Vue组件父子间通信01

最新推荐文章于 2024-07-20 23:54:17 发布
最新推荐文章于 2024-07-20 23:54:17 发布
阅读量44 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wangruifang/p/7771812.html
版权

子组件传递数据 用户已经登录

父组件接收数据 并显示列表，未登录不显示列表

/*
有两个组件，分别是main-component,header-component.
main-component是由header-component和一个列表（有5条数据 [100,200,300,400,500]），
header-component是由一个h1的标签：'这是页头',有一个数据isUserLogin:true

在渲染main-component时候，读取header-component在挂载完毕之后通过事件传递来的数据（isUserLogin），根据该数据的真假来决定列表是否显示.

<child-component @myEvent="recvMsg">
</child-component>

this.$emit('myEvent',myPhone)
*/

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>子与父通信</title>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
        <main-component></main-component>
    </div>
    <script>
    
//创建父组件
        Vue.component("main-component",{
            data:function(){
                return{
                    myList:[1,2,3,4,5],
                    isUserLogin:true
                }
            },
            methods:{
                recvMsg:function(msg){
                    this.isUserLogin = msg;
                }
            },
            template:`
            <div>
                <header-component @checkUserLogin="recvMsg"></header-component>
                <ul v-if="isUserLogin">
                    <li v-for="tmp in myList">{{tmp}}</li>
                </ul>
            </div>`
        })
        //创建子组件
        Vue.component("header-component",{
        //data属性中保存用户已经登录
            data:function(){
                return{
                    isLogin:false
                }
            },
            //通过$emit在挂载完成后把用户已经登录的值发传递给父组件
            mounted:function(){
                    this.$emit("checkUserLogin",this.isLogin);
            },
            template:`
                <div>
                    <h1>这是页头</h1>
                </div>
            `
        })
//    new一个vue实例
        new Vue({
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>

 

转载于:https://www.cnblogs.com/wangruifang/p/7771812.html

dede3535
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue父子组件进行通信方式
weixin_47450807的博客
02-07 5092
在vue中如何实现父子组件通信，本篇博客将会详细介绍父子组件通信的流程。 如图所示，父组件向子组件传递数据，可以通过props，子组件向父组件传递数据可以通过触发事件来进行。 一、props 父组件向子组件传递的数据，通过props进行传递，我们可以把props理解为属性。props传递存在两种格式，一种是数组格式，另一种是对象类型格式。其中第二种对象类型可以设置是否为必须数据，以及是否存在默认值数据。 第一种用法：数组 //父组件 <HelloWorld :title="title">&l
vue组件父子间通信详解（三）
08-28
Vue 组件父子间通信详解（三） Vue 组件父子间通信是指在 Vue 应用程序中，父组件和子组件之间的数据交换和事件传递。这种通信方式是 Vue 应用程序中非常重要的一部分，涉及到数据的传递、事件的触发、生命周期的...
Vue3父子组件间传参通信
qq_45397526的博客
08-11 3万+
本文主要是记录Vue3在setup语法糖下的父子组件间传参的四种方式。
vue父子组件通信
ioncannontic的博客
05-31 540
父子组件通信
vue3父子组件通信
前端很杂，故名前端杂货铺 —— coderkey
06-22 373
子组件中通过emit调用父组件中的自定义事件，给父组件的这个方法里传入数据数据。在父组件的模板中使用子组件标签，并且给标签自定义属性和属性名，即通过。绑定数值，而后传给子组件；
vue中父子组件通信
weixin_42576804的博客
02-14 214
在Vue中，父子组件之间的通信主要有三种方式： Props: 通过props将数据从父组件传递到子组件。 Event Bus: 创建一个事件总线，父组件通过触发事件来告诉子组件需要发生什么。 Provide / Inject: 在父组件中使用provide选项提供数据，在子组件中使用inject选项来访问数据。 这三种方式都可以在不同场景下使用，具体使用哪种方式取决于具体的需求。 ...
vue3-父子组件间通信
qq_45438471的博客
03-22 3746
在实际业务开发的过程中，我们时常会遇到组件间的通信问题，比如：父子组件间通信、同级组件间通信等。本篇文章中主要介绍父子组件间通信。
vue3父子组件间传参通信
XMCYD的博客
06-14 1万+
本文主要是记录Vue3在setup语法糖下的父子组件间通信的四种方式。
vue3 父子组件通信
qq_32439381的博客
08-02 3877
前提封装组件是前端开发必备的，所以父子组件的通信相当重要，接下来总结下vue3父子组件通信的知识点，使用语法糖。
Vue父子组件通信
l15655495902的博客
05-23 930
2.子组件通过$emit()向父组件传递数据或事件，如在子组件中自定义事件changeMessage,携带信息'bye’, 然后在父组件中通过v-on监听这个事件。1.父组件通过props向子组件传递数据（在子组件中用props接收）
vue中组件间通信的6种方式
热门推荐
jiangjunyuan168的博客
01-23 4万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。 除了使用vuex外还有下面6种组件间的通信方式： 1、 props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信 （1）父组件向子组件传值（props的用法） props的特点： props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父
vue组件父子间通信之综合练习（聊天室）
08-28
"vue组件父子间通信之综合练习（聊天室）" Vue组件父子间通信是指在Vue应用程序中，父组件和子组件之间的数据交换和事件触发机制。这种机制允许开发者在不同的组件之间共享数据和事件，从而实现复杂的用户界面交互...
Vue父子组件之间的通信实例详解
10-17
在 Vue 应用中，组件间的通信是非常关键的，尤其是父子组件之间的交互。本文将详细介绍 Vue 父子组件之间如何进行通信。 首先，我们要明确 Vue 的设计理念之一是单向数据流，这意味着通常情况下，数据应该从父组件...
Next.js静态导出与动态路由优化
最新发布
天涯学馆
07-20 740
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1082
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 549
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps
yuan5025的博客
07-17 1057
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 313
【代码】博客前端项目学习day03——框架页。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 598
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
vue3父子组件间通信
08-12
在Vue3中，父子组件之间的通信可以通过props和emit来实现。 1. 使用props：父组件可以通过props属性向子组件传递数据。在子组件中，可以通过接收props属性来使用这些数据。在父组件中，可以通过修改props属性的值来实现与子组件的通信。 父组件示例： ```vue <template> <div> <child-component :message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent component' }; } }; </script> ``` 子组件示例： ```vue <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: { message: { type: String, required: true } } }; </script> ``` 2. 使用emit：子组件可以通过emit方法触发自定义事件，然后父组件可以通过监听这些事件来获取子组件传递的数据。 父组件示例： ```vue <template> <div> <child-component @child-event="handleChildEvent"></child-component> <p>{{ messageFromChild }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { messageFromChild: '' }; }, methods: { handleChildEvent(message) { this.messageFromChild = message; } } }; </script> ``` 子组件示例： ```vue <template> <div> <button @click="sendMessageToParent">Send Message to Parent</button> </div> </template> <script> export default { methods: { sendMessageToParent() { this.$emit('child-event', 'Hello from child component'); } } }; </script> ``` 这两种方式都可以实现父子组件之间的通信，你可以根据具体的需求选择使用哪种方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值