Vue2 组件通信方式

已于 2024-05-11 14:10:28 修改
阅读量819 收藏 14
点赞数 24
分类专栏： Vue2 文章标签： 前端 vue.js
于 2024-05-10 18:44:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/g841805/article/details/138671275
版权

  1. props/emit

    1.  props

      1. 作用：父组件通过 props 向子组件传递数据
      2. parent.vue 
        <template>
    <div>
        <Son :msg="msg" :pfn="pFn"></Son>
    </div>
</template>

<script>
import Son from './son'
export default {
    name: 'Parent',
    data() {
        return {
            msg:'a message'
        }
    },
    methods: {
        pFn(){
            console.log("这是pFn");
        }
    },
    components:{
        Son
    }
}
</script>

<style></style>
      3. son.vue 
        <template>
    <div>
        <h3>p的msg：{{ msg }}</h3>
        <el-button type="primary" size="default" @click="pfn">点击使用p的方法</el-button>
    </div>
</template>

<script>
export default {
    name: 'Son',
    props:['pfn','msg']
}
</script>

<style></style>
      4. 效果

    2. emit

      1. 作用：子组件通过 $emit 和父组件通信
      2. parent.vue 
        <template>
    <div>
        <Son :msg="msg"  @onSendData="onSendData"></Son>
    </div>
</template>

<script>
import Son from './son'
export default {
    name: 'Parent',
    data() {
        return {
            msg:'a message'
        }
    },
    methods: {
    },
    components:{
        Son
    },
    methods: {
        onSendData(val){
            console.log(val);
        }
    },
}
</script>

<style></style>
      3. son.vue 
        <template>
    <div>
        <h3>p的msg：{{ msg }}</h3>
      <el-button type="primary" size="default" @click="sendData">点击向p发送数据</el-button> 
    </div>
</template>

<script>
export default {
    name: 'Son',
    props:['msg'],
    created() {
        console.log(this);
    },
    methods: {
        sendData(){
            this.$emit("onSendData",'data from son')
        }
    },
}
</script>

<style></style>
      4. 效果

  2. ref / $refs

    1. 作用:这个属性用在子组件上，它的用用就指向了子组件的实例，可以通过实例来访问组件的数据和方法
    2. parent.vue 
      <template>
    <div>
        <Son ref="Son"></Son>
    </div>
</template>

<script>
import Son from './son.vue';
export default {
    name: 'Parent',
    components:{
        Son,
    },
    mounted() {
        console.log("this.$refs.Son",this.$refs.Son.msg);
        this.$refs.Son.sayHi();
    },
   
}
</script>

<style></style>
    3. son.vue 
      <template>
    <div>
        <h3>p的msg：{{ msg }}</h3>
    </div>
</template>

<script>
export default {
    name: 'Son',
    data() {
        return {
            msg:"a message from son"
        }
    },
    methods: {
        sayHi(){
            console.log("hello");
        }
    },
}
</script>

<style></style>
    4. 效果

  3. bus事件总线

    1. 作用：eventBus事件总线适用于父子组件、非父子组件等之间的通信，使用步骤如下：
    2. 父组件 
      <template>
    <div>
        <Son></Son>
        <Son1></Son1>
    </div>
</template>

<script>
import Son from './son.vue';
import Son1 from './son1'
export default {
    name: 'Parent',
    components:{
        Son,Son1,
    },
    mounted() {  
    },
   
}
</script>

<style></style>
    3. 子组件1 
      <template>
    <div>
        <h3>Son</h3>
        <el-button type="primary" size="default" @click="emitSon1">点击向son1发送数据</el-button>
        
    </div>
</template>

<script>
export default {
    name: 'Son',
    data() {
        return {
            num:666,
        }
    },
    methods: {
        emitSon1(){
            console.log("this.bus",this.bus)
            this.bus.$emit("sendDataToSon1",this.num)
        }
    },
}
</script>

<style></style>
    4. 子组件2 
      <template>
 <div></div>
</template>

<script>
export default {
name: 'Son1',
data() {
    return {
        num:0
    }
},
mounted() {
    this.bus.$on("sendDataToSon1",data=>{
        console.log(data);
    })
},
}
</script>

<style></style>
    5. 效果

  4. 依赖注入（provide / inject）

    1. 作用：
      1. provide和inject是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。
      2. provide 钩子用来发送数据或方法。
      3. inject钩子用来接收数据或方法
    2. 祖宗组件 
      <template>
    <div>
        <h3>Parent num {{ num }}</h3>
        <Son></Son>
    </div>
</template>

<script>
import Son from './son.vue';
export default {
    name: 'Parent',
    components:{
        Son
    },
    data() {
        return {
            num:888
        }
    },
    provide(){
        return{
           num:this.num 
        }
    },
    mounted() {  
    },
   
}
</script>

<style></style>
    3. 父组件 
      <template>
    <div>
        <h3>Son num {{ num }}</h3> 
        <Son1></Son1>
    </div>
</template>

<script>
import Son1 from './son1'
export default {
    name: 'Son',
    components:{
        Son1,
    },
    data() {
        return {
            num:666,
        }
    },
    methods: {
    },
}
</script>

<style></style>
    4. 子组件 
      <template>
    <div>
        <h3>Son1 num {{ num }}</h3>
    </div>
</template>

<script>
export default {
    name: 'Son1',
    data() {
        return {
        }
    },
    inject:['num'],
    mounted() {
    },
    computed: {
    },
    methods: {
    },
}
</script>

<style></style>
    5. 效果

  5. $parent/$children

    1. 作用：
      1. 使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）。
      2. 使用 $children 可以让组件访问子组件的实例，但是， $children 并不能保证顺序，并且访问的数据也不是响应式的。
    2. 父组件 
      <template>
    <div>
        <h3>Parent num {{ num }}</h3>
        <el-button type="primary" size="default" @click="getSonInfo">获取子组件信息</el-button>   
        <Son></Son>
    </div>
</template>

<script>
import Son from './son.vue';
export default {
    name: 'Parent',
    components:{
        Son
    },
    data() {
        return {
            num:888
        }
    },
    mounted() {  
    },
    methods: {
        getSonInfo(){
           console.log("this.$children",this.$children[1].msg);
        }
    },
   
}
</script>

<style></style>
    3. 子组件 
      <template>
    <div>
        <h3>Son num {{ num }}</h3>
        <el-button type="primary" size="default" @click="add">+</el-button>
        
    </div>
</template>

<script>
// import Son1 from './son1'
export default {
    name: 'Son',
    components: {
        // Son1,
    },
    data() {
        return {
            num: this.$parent.num,
            msg:'a message from son'
        }
    },
    computed: {
        setData() {
            
        }
    },
    methods: {
        add(){
            this.num++
        },
    },
    mounted() {

    },
}
</script>

<style></style>
    4. 效果

  6. $attrs/$listeners的用法

    1. 作用：
      1. vue引入了 $attrs / $listeners，实组件之间的跨代通信。
      2. $attrs：继承所有的父组件属性（除了props传递的属性、class 和 style），一般用在子组件的子元素上
      3. $listeners：该属性是一个对象，里面包含了作用在这个组件上的所有监听器，可以配合 v-on=" $listeners " 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）
      4. inheritAttrs：默认值为true，继承所有的父组件属性除props之外的所有属性。
        只继承class属性。
    2. 祖先组件 
      <template>
    <div>
        <h3>Parent num {{ num }}</h3>
        <Son :sondata="num1" :son1data="num2"  @onSon="onSon" @onSon1="onSon1"></Son>
    </div>
</template>

<script>
import Son from './son.vue';
export default {
    name: 'Parent',
    components:{
        Son
    },
    data() {
        return {
            num:1,
            num1:666,
            num2:888,
        }
    },
    mounted() {  
    },
    methods: {
        onSon(){
            console.log("son的回调")
        },
        onSon1(){
            console.log("son1的回调");
        }
    },
   
}
</script>

<style></style>
    3. 父组件 
      <template>
    <div>
        <h3>Son num {{ sondata }}</h3>
        <Son1 v-bind="$attrs" v-on="$listeners"></Son1>
    </div>
</template>

<script>
import Son1 from './son1'
export default {
    name: 'Son',
    components: {
        Son1,
    },
    props:["sondata"],
    data() {
        return {
        }
    },
    inheritAttrs:false,
    computed: {
    },
    methods: {
    },
    mounted() {
        this.$emit("onSon","i am son")
    },
}
</script>

<style></style>
    4. 子组件 
      <template>
    <div>
        <h3>Son1 num {{ son1data }}</h3>
    </div>
</template>

<script>
export default {
    name: 'Son1',
    data() {
        return {
        }
    },
    props: ["son1data"],
    inheritAttrs:false,
    mounted() {
        this.$emit("onSon1","a message from son1")
    },
    computed: {
    },
    methods: {
    },
}
</script>

<style></style>
    5. 效果
前端小菜鸟 zZ
关注
  • 24
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue.js 父子组件通信的十种方式
01-19
面试官：Vue 中父子组件通信有哪些方式？ 自己先想一分钟。 无可否认，现在无论大厂还是小厂都已经用上了Vue.js 框架，简单易上手不说，教程详尽，社区活跃，第三方套件还多。真的是前端开发人员必备技能。而且在...
Vue中父组件向子组件通信的方法
08-30
可以使用props将父组件的数据传给子组件。子组件在接受数据时要显示声明props。下面通过一个例子给大家介绍Vue中父组件向子组件通信的方法，需要的朋友参考下吧
Vue2组件通信方式
codingLeader的博客
04-26 2978
Vue2组件通信方式 Vue父子、兄弟、父孙之间通信方式
Vue2组件通信专题
weixin_43599321的博客
04-20 1030
props 适用于的场景：父子组件通信 注意事项： 如果父组件给子组件传递数据（函数）：本质其实是子组件给父组件传递数据。 如果父组件给子组件传递数据（非函数）：本质就是父组件给子组件传递数据。
Vue2中10种组件通信方式和实践技巧
qq_40147756的博客
09-21 1064
Vue2中10种组件通信方式和实践技巧
Vue2 组件通信 ( 12种 )
qq_57491020的博客
10-13 5059
Vue2全部组件间通信方式
vue2组件通信的几种方式
jianwei的博客
04-27 304
vue2 组件之前通信
vue中组件间通信的6种方式
热门推荐
jiangjunyuan168的博客
01-23 4万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。 除了使用vuex外还有下面6种组件间的通信方式： 1、 props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信 （1）父组件向子组件传值（props的用法） props的特点： props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父
vue常用组件通信方式及vue2和vue3写法对比
~~~
05-19 1429
本文结合vue2和vue3写法对比，总结了vue中组件通信常用的几种方式。父子组件：props / $emit、 ref / $parent隔代组件：provide / inject、eventBus、Vuex / Pinia兄弟组件：eventBus、Vuex / Pinia写作不易，你的一赞一评，就是我前行的最大动力。如有问题，欢迎指出！
vue父子组件通信方式哪几种
树上骑个猴的博客
05-04 1852
第一种：props和$emit() parent.vue <template> <div id="app"> <div>父组件：{{message}}</div> <ChildrenComponet :message="message" @changeMsgFn="message=$event"/> </div> </template> <script> import ChildrenC
vue3组件通信方式
weixin_43867717的博客
10-11 2571
如果父组件是纯 Vue3 写法，子组件混合写法，可以通过 props 接收到 data 和 setup 函数里的属性，但是子组件要是在 setup 里接收，同样只能接收到父组件中 setup 函数里的属性，接收不到 data 里的属性。所以官方也不推荐混合写法。：如果父组件是混合写法，子组件纯 Vue3 写法的话，是接收不到父组件里 data 的属性，只能接收到父组件里 setup 函数里传的属性。props适用于父传子，有两种写法，混合写法和纯vue3写法（语法糖）
详解Vue组件之间通信的七种方式
10-17
主要介绍了Vue组件之间通信的七种方式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue组件通信的四种方式汇总
08-28
主要给大家介绍了关于Vue组件通信的四种方式，分别是父子组件通信、非父子组件的eventBus通信、利用localStorage或者sessionStorage以及利用Vuex等方法，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
vue源码之mustache模板引擎1
qweasl_的博客
05-21 358
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
【Web】CISCN 2024初赛 题解(全)
uuzeray的博客
05-21 1168
这里注意细节，靶机发了两次请求，第一次我们就返回一个正常的图片，第二次请求就发一个302，php代码块要用html标签包裹。注意下面这段报错，因为加不了引号，开头是数字的话，就会将类型识别为数字，若后续出现了字符串就会报错。再打sqlite，指定tableName，加载写入的恶意so文件，反弹shell。最后注意要将获取的变量元组转字符串，再用逗号分隔，依次输出，从而绕过seed。考的python栈帧沙箱逃逸，获取到外部的栈帧，就可以用。因为ban了引号，考虑hex2bin，将数字转为字符串。
深入解析：Element Plus 与 Vite、Nuxt、Laravel 的结合使用
最新发布
一个普通人
05-23 939
Element Plus 作为一个强大的 Vue.js 组件库，可以与 Vite、Nuxt 和 Laravel 等不同的工具和框架结合使用，为开发者提供灵活、高效的开发体验。根据项目需求选择合适的工具和框架，可以极大地提升开发效率和应用性能
【绿雪问茶】用前端三件套完成一个大项目（一）
大象不下象棋的博客
05-21 377
Green Snow Asks Tea
python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据
2301_78159247的博客
05-23 464
请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字。
vue2和vue3组件通信方式的区别
03-13
Vue2和Vue3在组件通信方式上有一些区别。下面是它们的主要区别： 1. Vue2中的组件通信方式： - 父子组件通信：父组件通过props向子组件传递数据，子组件通过$emit触发事件向父组件传递数据。 - 兄弟组件通信：可以通过一个共享的父组件来传递数据，或者使用一个全局事件总线（如Vue实例或者Vuex）来进行通信。 2. Vue3中的组件通信方式： - 父子组件通信：父组件通过props向子组件传递数据，子组件通过emits选项声明事件并通过触发事件向父组件传递数据。 - 兄弟组件通信：可以使用provide和inject来实现兄弟组件之间的通信。一个组件通过provide提供数据，另一个组件通过inject来注入数据。 - 全局状态管理：Vue3引入了一个新的响应式状态管理库，即Composition API中的`ref`、`reactive`等函数，可以在任何组件中共享和访问全局状态。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值