Vue组件之间的传值（超详细）

最新推荐文章于 2022-11-30 11:06:51 发布

骆小骆

最新推荐文章于 2022-11-30 11:06:51 发布

阅读量2.9k

点赞数 4

分类专栏： Vue Vue 学习总线

zhijie Luo

本文链接：https://blog.csdn.net/weixin_42216818/article/details/104405869

版权

本文详细介绍了Vue中组件间的通信方式，包括父组件如何通过属性将字符串和动态属性传递给子组件，子组件如何通过自定义事件将参数回传给父组件，以及利用事件总线实现兄弟组件间的值传递。通过实例解析了各通信方法的实现步骤。

摘要由CSDN通过智能技术生成

父组件传子组件

1.传递的是字符串的时候

父组件里面用属性传递，子组件内用peops 接收

<body>
    <div id="app">
        <my-child msg="luoxiaoluo"></my-child>
    </div>
</body>
<template id="child">
    <!-- 子组件有且仅有一个最外层元素 -->
    <div>{
   {
   msg}}</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//  引入外部的Vue.js
<script>
    new Vue({
   
        el: "#app",
        components: {
   
            'my-child': {
   
                template: '#child',
                props: ['msg']
            }
        }
    })
</script>

2.传递的是动态属性的时候，借助 v-bind
也是用的props 进行接收

<body>
    <div id="app">
        <my-child :msg="msg"></my-child>
    </div>
</body>
<template id="child">
    <!-- 子组件有且仅有一个最外层元素 -->
    <div>{
   {
   msg}}</div>
</template>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
   
        el: "#app",
        data: {
   
            msg: 'luozhijie'  // 注 ： 传递的不只可能是字符串 数据 也可能是方法
        },
        components: {
   
            'my-child': {
   
                template: '#child'

最低0.47元/天解锁文章

骆小骆

关注

4
点赞
踩
38

收藏

觉得还不错? 一键收藏
1
评论
Vue组件之间的传值（超详细）

父组件传子组件1.传递的是字符串的时候父组件里面用属性传递，子组件内用peops 接收<body> <div id="app"> <my-child msg="luoxiaoluo"></my-child> </div></body><template id="chil...
复制链接

扫一扫