Vue组件与组件见的通信

最新推荐文章于 2024-07-11 10:59:33 发布
最新推荐文章于 2024-07-11 10:59:33 发布
阅读量182 收藏 1
点赞数
文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45727765/article/details/106107938
版权

vue组件创建

Vue组件是Vue最强大的功能之一
可以扩展HTML元素，可以封装可重用的代码块
优点：

1.可以减少代码的重用，提高开发效率
2.减低页面的耦合度，使页面更方便维护与管理

局部组件

		new Vue({
            el:"#app",
            data:{},	// 数据
            methods:{},		// 函数，方法
            computed:{},	// 计算属性
            filters:{},		// 过滤器
            watch:{},		// 侦听器
             components:{//局部
                 'my-component':{  // 组件名
                     template:`	  		// html模板
                       <div>
                         <h1>ｈｅｌｌｏ　ｃｏｍｐｏｎｅｎｔ</h1>  
                         <input> 
                       </div>               
                     `//模板 html元素
                         
                 }
             }
        })

全局组件

Vue.component('my-component',{
            template:`
                <div>
                    <h1>这是全局组件</h1>
                    <input>
                </div>
            `,
            data:function(){
                return{

                }
            },
            methods:{

            }
        })

        new Vue({
            el:"#app"
        })

组件的嵌套

<script>
            Vue.component('my-component',{
                template:`
                    <div>
                        <p>{{msg}}</p>
                    </div>
                `,
                data:function(){
                    return{
                        msg:'hello vue'
                    }
                }
            })


            Vue.component('father',{
                template:`
                    <div>
                        <h1>我是父组件</h1>
                        <my-component></my-component>
                    </div>
                `
            })

            new Vue({
                el:"#app",

            })
        </script>

组件间的通信

父组件给子组件传值

在父组件的使用的时候讲数据作为参数传给子组件，在子组件中使用props定义属性， props：[‘text’]
<script>
                Vue.component('pa',{
                    template:`
                        <div>
                                <h1>我是父组件</h1>
                                <my v-bind:txt="msg"></my>
                        </div>

                    `,
                    data:function(){
                        return{
                            msg:'我是父组件中的数据，要传给给子组件'
                        }
                    }
                })
                
                Vue.component('my',{
                    //传一个属性
                    props:['txt'],
                    template:`
                    <div>
                            <h1>我是子组件</h1>
                            <p>{{txt}}</p>
                    </div>
                    `
                })



                new Vue({
                    el:"#app"
                })
            </script>


            	//vue实例给组件传值
             <script>
                Vue.component('pr',{
                    props:['txt'],
                    template:`
                        <div>
                            <h1>{{txt}}</h1>
                        </div>
                    
                    `
                })

                new Vue({
                    el:"#app",
                    data:{
                        msg:'hello vue'
                    }
                })
             </script>

子组件给父组件传值

用 $emit （‘事件’，属性）传值，然后在父组件中调用方法事件，然后用虚参接受值，
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <fu></fu>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        Vue.component('fu',{
            template:`
                <div>
                    <h1> 这是父组件</h1>
                        <ul>
                            <li v-for='item in arra'>{{item}}</li>
                        </ul>

                    <pi @inval='invala' :tit='name1'></pi>
                    <pi @inval='invala' :tit='name2'></pi>
                </div>
            `,
            data:function(){
                return{
                    name1:'lll',
                    name2:'zzzz',
                    arra:[]
                }
            },
            methods:{
                invala(vas){
                    this.arra.push(vas);
                }
            }
        })

        Vue.component('pi',{
            template:`
                <div>
                    <label id='in'>{{tit}}</label>
                    :<input name='in' type='text' v-model='val'>
                    <input type='button' value='发送' @click='tjs'>
                </div>
            `,
            props:['tit'],
            data:function(){
                return{
                        val:'',
                }
            },
            methods:{
                tjs:function(){
                    this.$emit('inval', this.val);
                    this.val='';
                }
            }

        })

        
        let vm = new Vue({
            el:'#app',
            data:{}
        })
    </script>

</body>
</html>

兄弟组件间的传值

大朗吃药药
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 组件之间的通信
muzidigbig的博客
03-22 1339
props父传子 emits子传父 mitt任意组件互传 provide inject跨组件传值 插槽传结构 v-model
vue组件间通信
江拥羡橙的博客
09-16 3万+
本章我们将介绍组件间是如何实现数据通信的。包括父组件向子组件、子组件向父组件、兄弟组件、非关系组件之间的数据通信。组件通信是组件式开发中非常重要的一部分，也是组件式开发中的难点。在学完本章之后，同学们可以通过反复地编写组件来加深印象。组件是 vue 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。我们需要使用特定的方式来实现组件间的数据通信，接下来让我们一个个介绍这几种类别的组件通信是如何实现的。
常用的5种Vue组件通信方法
qq_38131840的博客
03-22 1390
Vue组件通信的常用方法
vue中组件间通信的6种方式
热门推荐
jiangjunyuan168的博客
01-23 4万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。 除了使用vuex外还有下面6种组件间的通信方式： 1、 props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信 （1）父组件向子组件传值（props的用法） props的特点： props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父
vue父子组件通信方式哪几种
树上骑个猴的博客
05-04 1924
第一种：props和$emit() parent.vue <template> <div id="app"> <div>父组件：{{message}}</div> <ChildrenComponet :message="message" @changeMsgFn="message=$event"/> </div> </template> <script> import ChildrenC
vue 组件间通信方式
山重水复疑无路，柳暗花明又一村。
04-17 1093
要注意的是 provide 和 inject 传递的数据不是响应式的，也就是说用 inject 接收来数据后，provide 里的数据改变了，后代组件中的数据不会改变，除非传入的就是一个可监听的对象。在父组件中给子组件绑定自定义事件，然后调用需要的方法，然后在子组件中用 this.$emit 触发父组件的事件，第一个是事件名，第二个是参数。在父组件子组件添加自定义属性，挂载需要传递的数据，子组件用 props 来接受，接收方式也可以是数组，也可以是对象，子组件接收到数据之后，
Vue组件通信
low神
07-16 884
父子级通信推荐使用：props/$emit、$parent/$children/$refs、$attrs/$listeners 兄弟组件通信推荐使用：$emit/$on、Vuex 无关系组件通信推荐使用：$emit/$on、Vuex、$attrs/$listeners、provide/inject 1、props和$emit（父子组件通信） 子组件使用prop...
vue组件通信
qq_46376192的博客
12-31 2751
vue组件通信
Vue组件通信的六种方式
好的文章我尽力写，大家的学习我尽力帮
02-02 1万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、$emit/$on、vuex、$parent / $children、$attrs/$listen
vue 组件之间的通信
青蛙king的博客
08-14 4156
目录 前言 一、props 和 $emit 二、$attrs 和 $listeners 三、中央事件总线 四、provide 和 inject 五、v-model 六、$parent 和 $children 七、boradcast 和 dispatch 八、vuex 处理组件之间的数据交互 前言 参考：https://segmentfault.com/a/1190000018331900 vue 组件之间的通信方式大概有 9种： props 和 $emit $refs $at.
Vue 之孙组件向爷组件通信的实现
10-17
以上代码示例展示了Vue中孙组件向爷组件通信的一个简单实现。在实际项目中，可能需要处理更复杂的情况，比如多个子组件向爷组件通信、事件包含多层嵌套等。此时，可以考虑使用Vuex进行状态管理，或根据具体情况选择...
Vue中父组件向子组件通信的方法
08-30
Vue中父组件向子组件通信的方法 在 Vue 框架中，父组件向子组件通信是一种常见的场景。可以使用 props 将父组件的数据传递给子组件。子组件在接受数据时需要显示声明 props。在本文中，我们将通过一个实例来介绍 ...
vue组件通信传值操作示例
10-17
本篇将详细讲解 Vue 组件间通信的两种常见方式：父子组件通信和兄弟组件通信。 **1. 父子组件通信** 在 Vue 中，父子组件通信主要通过以下几种方式： - **Props 向下传递数据**：父组件可以通过 `props` 将数据...
Vue组件间通信-Vuex
10-16
主要介绍了Vue组件间通信-Vuex,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue组件间通信解析
12-29
相关链接\组件通信：点击查看 学习链接：Vue.js——60分钟快速入门点击查看 分分钟玩转Vue.js组件点击查看 父组件传子组件 父传子方法（一） 属性传递 props //子组件 <li v-for=item>{{item}} [removed] ...
vue + element ui 实现侧边栏导航栏折叠收起
爱敲代码的卡拉米的博客
07-08 422
通过 row 和 col 组件，并通过 col 组件的。属性我们就可以自由地组合布局。
vue详解
m0_46702681的博客
07-08 1160
指令:HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能常用指令:v-for 列表渲染，遍历容器的元素或者对象的属性v-bind 为HTML标签绑定属性值，如设置 href，css样式等v-if/y-else-if/v-else 条件性的渲染某元素，判定为true时渲染，否则不渲染v-show 根据条件展示某元素，区别在于切换的是display属性的值。
基于若依的文件上传、下载
谁说自己不可以
07-06 1142
基于若依的文件上传、下载、详细步骤。
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
最新发布
xiejunlan的博客
07-11 1265
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
Day04_vue组件_组件通信_todo案例(1).pdf
05-03
"Day04_vue组件_组件通信_todo案例(1).pdf" 本文将深入探讨Vue.js中的组件系统，组件通信及其在实际开发中的应用，通过一个todo案例来阐述相关概念和技术。首先，我们需要理解Vue组件的核心价值在于提高代码复用性...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值