Vue2，组件，组件间的通讯，父子组件间的相互访问

已于 2022-02-16 09:59:58 修改
阅读量195 收藏
点赞数
分类专栏： Vue2 文章标签： javascript 前端 vue.js
于 2022-02-15 11:22:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45188736/article/details/122940550
版权

组件以及组件间的通讯

文章目录

组件

使用全局定义

Vue.component("mynav",{
    template:"<ul><li>首页</li><li>我的</li></ul>"
})

注意：在定义组件时里面的data属性必须是函数式编程，目的是每次调用组件返回一个独立的数。

局部组件的定义

//1.创建组件
let mynav={
    template:"<p>这是一个导航</p>",
    data(){
        return{
            
        }
    },
    methods:{},
    watch:{},
    computed:{},
    
}
//2.注册组件
const app=new Vue({
    el:'#app',
  components:{
      mynav
  }
})

*注意：驼峰命名组件时，使用组件写标签形式的时候该用-连接，例如定义了一个组件时myIpt,那么使用标签就应该这样写<my-ipt></my-ipt>

组件的嵌套

<body>
    <div id="app">
        <father></father>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
     let son = {
            template: '<div>son</div>'
        }
        let father = {
            template: '<span>father<son></son></span>',
            components: {
                son
            }
        }
     
        const app = new Vue({
            el: '#app',
            components: {
                father
            }
        })

    </script>
</body>

注意：组件的嵌套子组件声明要放在父组件前面，父组件内必须声明子组件

组件间的通信

父向子通讯

props的使用，首先在父组件的子标签内写上要传递的元素，接着在子组件中通过props来接收，相当于一个data值，不过注意这里不能够改变该值，因为是父组件给的。

<body>
    <div id="app">
        <father></father>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
     let son = {
            template: '<div>son {{m}}</div>',
            // props: ['m'],     //props:两种方法书写，对象和数组的方式
            props:{
                m:{
                    // type:Number,   //规定该值的类型必须是什么
                    // default:300,   //默认值
                    required:true      //父组件是否必须写这个m属性
                }
            }
        
        }
        let father = {
            template: '<span>father<son :m="money" ></son></span>',
            components: {
                son
            },
            data(){
                return{
                    money:100
                }
            }
        }
     
        const app = new Vue({
            el: '#app',
            components: {
                father
            }
        })

    </script>
</body>

子向父通讯

使用自定义事件

//子组件发布事件
this.$emit('more') 发布事件
//父组件注册事件
@more='handler()' //handler是一个函数体

我们来看详细代码：

<body>
    <div id="app">
        <father></father>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
     let son = {
            template: '<div>son {{m}} <button @click="add">点击增加</button> </div>',
            // props: ['m'],
            props:{
                m:{
    
                    required:true
                }
            },
            methods: {
                add(){
                    this.$emit('add')  //发布一个add
                }
            },
        
        }
        let father = {
            template: '<span>father<son :m="money" @add="add"></son></span>',  //son标签内接收add并触发后面的函数。
            components: {
                son
            },
            data(){
                return{
                    money:100
                }
            },
            methods:{
                add(){
                    this.money+=100
                }
            }
           
        }
     
        const app = new Vue({
            el: '#app',
            components: {
                father
            }
        })

    </script>
</body>

兄弟组件之间的通信

创建一个事件车的Vue实例，通过它来发布和订阅。

<body>
    <div id="app">
        <brother1></brother1>
        <bro-ther2></bro-ther2>  //注意驼峰命名的组件标签的写法
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        const eventBus = new Vue()
        let brother1 = {
            template: '<span @click="changecolor">111</span>',
            methods:{
                changecolor(){
                    eventBus.$emit('green')   //通过事件车去发布green
                }
            }

        }
        let broTher2 = {
            template: '<span :style={color:color}>222</span>',
            created(){
                eventBus.$on('green',()=>{  //通过事件车订阅了green事件，并执行回调函数赋值color
                this.color='green'
                })
            },
            data(){
                return{
                    color:''
                }
            }
        }
        const app = new Vue({
            el: '#app',
            components: {
                brother1,
                broTher2
            }
        })
    </script>
</body>

隔代通讯

使用的方法：provide inject

<body>
    <div id="app">
        <grand-father></grand-father>

    </div>

    <!-- 各个模板的书写 -->
    <template id="son">
        <div>
            Son
            {{msg}}
        </div>
    </template>

    <template id="father">
        <div>
            Father
            <son></son>
        </div>
    </template>


    <template id="grandFather">
        <div>
            grandFather
            <father></father>
        </div>
    </template>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let son = {
            template: '#son',
            inject:['msg']   //inject接收

        }
        let father = {
            template: '#father',
            components: {
                son
            }
        }
        let grandFather = {
            template: '#grandFather',
            components: {
                father
            },
            provide:{
                msg:"隔代通讯"  //provide 提供 
            }

        }

        const app = new Vue({
            el: '#app',
            components: {
                grandFather
            }
        })
    </script>
</body>

PubSub插件实现 任意组件间的通讯

同样的可以用第三方插件：PubSub来实现同样的操作

  • pubsub.subscribe() 订阅
  • pubsub.publish() 发布
<body>
    <div id="app">
        <brother1></brother1>
        <brother2></brother2>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/PubSub"></script>
    <script>
        const eventBus = new Vue();
        const pubsub = new PubSub();
        let brother1 = {
            template: '<span @click="changeGreen" :style={color:color}>brother1</span>',
            methods: {
                changeGreen() {
                    pubsub.publish('green')
                }
            },
            data() {
                return {
                    color: ''
                }
            },
            created() {
                pubsub.subscribe('red', () => {
                    this.color = 'red'
                })
            }
        }
        let brother2 = {
            template: '<span :style={color:color}  @click="changeRed">brother2</span>',
            created() {
                pubsub.subscribe('green', () => {
                    console.log(111);
                    this.color = 'green';
                })
            },
            data() {
                return {
                    color: ''
                }
            },
            methods: {
                changeRed() {
                    pubsub.publish('red')
                }
            }

        }
        const app = new Vue({
            el: '#app',
            components: {
                brother1,
                brother2
            }
        })
    </script>
</body>

父子组件的互相访问

父访问子

ref方法的使用，利用ref绑定组件，获得绑定的组件。

<body>
    <div id="app">
<father></father>

    </div>

    <!-- 各个模板的书写 -->
    <template id="son">
        <div v-show='isShow'>
            Son
        </div>
    </template>

    <template id="father">
        <div>
            Father
            <son ref="myson"></son>
            <button @click="change">显示或隐藏</button>
        </div>
    </template>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let son={
            template:'#son',
            methods: {
                changeColor(){
                   return this.isShow=!this.isShow
                }
            },
            data(){
                return{
                    isShow:false
                }
            }
        }
//ref 加到组件上的时候，获取到的是Vue实例

        let father={
        template:'#father',
        components:{
            son
        },
        methods:{
change(){
    console.log(this.$refs.myson)
    this.$refs.myson.changeColor()
}
        }
        }

    const app=new Vue({
            el:'#app',
            components:{
                father
            }
        })
    </script>
</body>

子访问父

$parent方法,访问到父组件。

<body>
    <div id="app">
        <father></father>

    </div>

    <!-- 各个模板的书写 -->
    <template id="son">
        <div >
            Son
            <button @click="get">点击我得到父级元素的属性</button>
        </div>
        
    </template>

    <template id="father">
        <div>
            Father
            <son></son>
   
        </div>
    </template>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let son = {
            template: '#son',
            methods: {
                get(){
                    console.log(this.$parent.money)  //$parent 访问父组件
                }
            },
       
        }
  

        let father = {
            template: '#father',
            components: {
                son
            },
            data(){
                return{
                    money:111234
                }
            }
           
        }

        const app = new Vue({
            el: '#app',
            components: {
                father
            }
        })
    </script>
</body>

总结

无论是组件通讯还是组件间的访问目的都是为了组件间的传递数据，灵活的运用才是王道。

玛卡巴卡的造
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
八种Vue组件间通讯方式合集(推荐)
10-14
以上就是Vue组件间通讯的八种常见方式，每种方式都有其适用场景和优缺点。开发者应根据实际需求选择合适的方法，以保持代码的清晰性和可维护性。在项目开发过程中，理解并灵活运用这些通讯方式，能够提高开发效率，...
Vue3动态组件component详解
qq_45861961的博客
08-15 1万+
这样就展示了一个动态组件的完整用法,可以方便地在不同组件间进行切换并传递数据。动态组件非常适合需要根据不同条件展示不同内容的场景,掌握它可以更灵活地构建组件。动态组件component是Vue中非常实用的一个功能,它可以根据条件动态切换不同的组件。本文将详细介绍其用法。这样就可以通过修改currentComponent的值,来动态切换ComponentA和ComponentB了。需要注意的是,对于动态组件,Vue会在组件切换时销毁前一个组件实例并创建新实例。所以切换动态组件时不会保留组件的状态。
:is是什么用法？
m0_57236802的博客
05-29 713
是一个数据属性，它的值应该是一个已注册的组件的名称。这个名称可以是一个全局注册的组件的字符串名称，也可以是一个局部注册的组件的对象。指令是一个非常有用的工具，因为它允许你根据应用的状态或者用户的交互动态地更改界面的组成部分。标签是一个 Vue 的内置组件，它的作用是在运行时动态地渲染一个组件，而这个组件是由。是一个特殊的 Vue 指令，用于动态地绑定一个组件的类型。指令绑定的值，你可以在运行时切换不同的组件。这种技术被称为动态组件。标签会自动地切换到相应的组件。例如，如果你有两个组件。
vue.js中如何使用动态组件。
2301_77742545的博客
01-28 673
Toggle Component 开发
vuejs官方文档之动态组件
飞鸿的博客
08-15 284
有的时候，在不同组件之间进行动态切换时非常有用的，比如在一个多标签的界面里。 上述内容可以通过vue的&lt;component&gt;元素加一个特殊的is特性来实现， //组件会在currentTabComponent改变时改变 &lt;component v-bind:is="currentTabComponent"&gt;&lt;/component&gt; 在上述实例中，cur...
vue3.0 + 动态加载组件 + 全局注册组件
最新发布
weixin_44384273的博客
01-30 4563
动态加载组件、全局注册组件
vue父子组件间引用之$parent、$children
10-15
在Vue中，父子组件间的通信是非常常见的需求。本文将深入探讨Vue中的父子组件引用机制，特别是如何利用`$parent`和`$children`属性进行通信。 首先，Vue 提供了两种主要的父子组件通信方式：props 和事件（$on() 和...
Vue 父子组件、组件间通信
08-31
Vue 父子组件、组件间通信 Vue.js 是一个基于MVVM 模式的前端框架，它提供了一个强大的组件系统，允许开发者创建复杂的用户界面。其中，父子组件的通信是一个非常重要的概念，它允许组件之间进行数据交换和事件传递...
vue 通过下拉框组件学习vue中的父子通讯
08-28
在 Vue 组件化开发中，父子组件之间的通讯是非常重要的。父子组件之间的数据传递是组件化开发的关键所在。这篇文章主要介绍了 Vue 通过下拉框组件学习 Vue 中的父子通讯的相关知识，涵盖了父组件和子组件的实现代码...
vue2.0父子组件间传递数据的方法
10-18
在Vue 2.0中，父子组件间的通信是框架的核心特性之一，对于构建复杂的应用程序至关重要。本篇文章将通过一个简单的小例子来详细介绍如何在父子组件之间传递数据。 首先，我们要明确Vue中组件间的通信主要有两种方式...
Vue内置组件的component标签
热门推荐
lwc_1234的博客
01-17 1万+
记录vue内置组件的component标签的使用
【Vuejs】1720- 详细聊一聊 Vue3 动态组件
pingan8787
06-21 4113
???? 「相关文章」深入浅出 Vue3 自定义指令6 个你必须明白 Vue3 的 ref 和 reactive 问题初中级前端必须掌握的 10 个 Vue 优化技巧分享 15 个 Vue3 全家桶开发的避坑经验动态组件[1]是 Vue3 中非常重要的一个组件类型，它可以让我们在不同的场景下灵活地渲染不同的组件。✨ 快速上手使用动态组件非常简单，我们只需要在模板中使用 <component>...
Vue3中使用component :is 加载组件
fury的博客
02-08 6331
【代码】Vue3中使用component :is 加载组件。
vue中的动态组件
qq_36529459的博客
03-15 8591
在我们平时使用vue中的模板的时候，许多时候都是直接定义成一个固定的模板，但是，vue中提供了一个动态模板，可以在任意模板中切换，就是用vue中&lt;component&gt;用:is来挂载不同的组件。&lt;div id="app" v-cloak&gt; &lt;component :is="currentView"&gt;&lt;/component&gt; ...
keep-alive保存不住数据，一个组件会触发两次created
qq_36800701的博客
03-22 3364
众所周知，组件可以缓存住组件的数据；具体用法可以看官网; 大概的用法就是下面这样的 <template> <keep-alive> <component :is="currentComponet"></component> </keep-alive> </template> <script> impo...
Vue动态组件 component :is的使用
couch potato的博客
10-12 1788
Vue动态组件 component :is的使用。
vue2 中 data props methods watch computed watch created他们之间的注意事项和关系
qq_36571836的博客
05-12 440
watch 和 computed：watch 中的监听函数可以依赖于 computed 中的计算属性，但是 computed 中的计算属性不能依赖于 watch 中的监听函数。props：用于接收父组件传递的数据，必须是一个数组或对象，数组中的每个元素是一个字符串，表示接收的属性名，对象中的每个属性表示接收的属性名和属性值的类型。computed：用于计算属性，根据已有的数据计算出新的数据，可以监听多个数据的变化，只有当依赖的数据发生变化时才会重新计算。
在vue中，一个组件怎么调用另一个组件中的data数据
m0_68094390的博客
05-16 4309
在上面的代码中，我们将子组件 ChildComponent 加载到父组件的模板中，并指定了一个名字为 child。需要注意的是，使用 ref 来访问子组件的数据是不太推荐的做法，因为这会破坏组件之间的封装性。使用 ref，可以给组件指定一个唯一的名字，然后通过 this.$refs.[ref name] 来访问该组件的所有属性和方法，包括 data 数据。在 Vue 中，组件之间的数据通信可以通过 props 和 events 来实现，但是要访问另一个组件中的 data 数据，可以使用 ref。
vue父子组件的访问
就是你的博客
05-29 146
组件的复用行很高，开发中很少使用，一般使用props来传值。直接通过this.$parent。直接通过this.$root。第二步 使用，访问组件信息。第一步：组件引用信息。通过$refs ，在开发中常用。
Vue.js组件深入解析：slot与父子通信
在本篇中，我们将深入探讨Vue.js组件的几个关键概念，包括编译作用域、内容插槽、以及父子组件间的通信。 1. **组件的编译作用域** 在Vue中，每个组件都有自己的作用域，这意味着组件内部的数据（如`data`属性）仅...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值