组件之间的通信方式

已于 2024-06-13 09:16:24 修改
阅读量1k 收藏 8
点赞数 29
文章标签： 前端 vue.js javascript
于 2024-06-13 09:16:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58310590/article/details/139641896
版权

【 0 】前言

Vue 是一个渐进式的 JavaScript 框架，通过组件化的方式构建应用。在 Vue 中，组件通信指的是不同组件之间传递数据、共享数据或调用方法等行为。在前端开发中，子组件和父组件之间的通信是非常常见和重要的。

【 1 】父子组件通信的常用方法：

  1. Props 属性传递：父组件通过 props 将数据或方法传递给子组件，子组件通过 props 接收并使用传递过来的数据或方法。

  2. Emit 事件触发：子组件通过 $emit 方法触发一个自定义事件，并将数据传递给父组件，父组件通过监听这个事件来接收数据。

【 2 】父传子组件

【 2.1 】HTML 结构

  • <div id="app">：Vue 应用的根元素。

  • <child-component :message="url"></child-component>：在父组件中使用子组件 child-component，通过 message 属性将父组件的 url 数据传递给子组件。

【 2.2 】Vue 组件定义

【 2.2.1 】子组件 child-component

  • props: ['message']：声明子组件需要从父组件接收的属性 message。

  • template

    ：子组件的模板，展示了一个带有图片的简单组件界面。

    • @click="handleBack" 和 @click="handleChange"：绑定了两个点击事件，分别对应后退和切换操作。

    • :src="yun"：动态绑定 img 标签的 src 属性，显示图片。

子组件的 data 和 methods

  • data 函数返回组件的内部数据。

    • title：子组件标题的数据。

    • yun：子组件中图片的 URL 数据。

  • methods 包含组件的方法。

    • handleBack 方法：当点击后退时触发的方法，弹出一个提示框。

    • handleChange 方法：当点击切换时触发的方法，将父组件传递的 url 数据赋值给子组件的 yun 数据，并在控制台打印出 message（父组件传递的 URL）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Props Example</title>
    <!--  bootstrap  -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--  Vue  -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <!--  axios  -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
​
</head>
<body>
​
<div id="app">
    <h1>组件的使用-父传子</h1>
<!--  这里的URL就是父组件的  -->
    <child-component :message="url"></child-component>
​
</div>
​
<script>
​
    // 子组件定义
    Vue.component('child-component', {
​
        // 子组件接收父组件传递过来的数据
        props: ['message'],
        template: `<div>
          <div style="width: 300px;display: flex;justify-content:space-between;border: aquamarine solid 1px">
            <span @click="handleBack">后退</span>
            <span @click="handleChange">{{ title }}</span>
            <span>前进</span>
            <br>
          </div>
          <div>
<!--    子组件        -->
            <img :src="yun" alt="" height="300px" width="250px">
          </div>
        </div>`,
​
        data(){
            return {
                title:"子组件传值",
                yun:'https://wx1.sinaimg.cn/mw690/003yHo7Nly1hp5bg9itehj60u00u0qdo02.jpg',
​
​
            }
        },
        methods: {
            handleBack() {
                alert('后退了')
            },
            handleChange() {
                // 使用this.message获取父组件传递的url
                console.log('1111')
​
                this.yun = this.message
                console.log(this.message)
            }
        },
    });
​
    // 父组件的定义
    new Vue({
        el:'#app',
        data:{
            //父组件的图片
            url: 'https://pic.netbian.com/uploads/allimg/180826/113958-1535254798fc1c.jpg',
        },
​
    })
​
</script>
​
</body>
</html>

【 2.3 】示例二

父组件和子组件之间传值的关键是使用props（属性）和事件。这是Vue.js中实现组件通信的两种主要方式：

  1. Props（属性）：

    • 父组件通过props向子组件传递数据。

    • 子组件通过props选项声明需要接收的属性。

    • 父组件可以在使用子组件的地方通过属性绑定的方式将数据传递给子组件。

    示例：

    <!-- 父组件中使用子组件并传递数据 -->
<child-component :message="parentMessage"></child-component>
    // 子组件中声明需要接收的props
Vue.component('child-component', {
    props: ['message'],
    template: `<div>{{ message }}</div>`
});

  2. 事件：

    • 子组件可以通过$emit方法触发自定义事件，向父组件发送数据。

    • 父组件可以在子组件标签上监听这些自定义事件，并在触发事件时执行相应的方法来处理数据。

    示例：

    // 子组件中通过$emit触发事件
this.$emit('childEvent', eventData);
​
// 父组件中监听子组件的事件并执行相应逻辑
<child-component @childEvent="handleChildEvent"></child-component>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Props Example with Dynamic Message</title>
    <!--  Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--  Vue -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
​
<div id="app">
    <h1>父传子组件动态通信示例</h1>
    <!-- 父组件包含输入框和按钮，用于动态更改子组件中的消息 -->
    <parent-component></parent-component>
</div>
​
<script>
    // 子组件定义
    Vue.component('child-component', {
        // 子组件接收父组件传递过来的数据
        props: ['message'],
        template: `
          <div>
            <p>来自父组件的消息: {{ message }}</p>
          </div>`
    });
​
    // 父组件定义
    Vue.component('parent-component', {
        template: `
          <div>
            <!--  指定输入框的占位符文本 -->
            <input type="text" v-model="newmessage" placeholder="输入新的消息" class="form-control"/>
            <button @click="sendhand" class="btn btn-primary mt-2">发送消息</button>
            <!--  使用动态消息更新子组件      -->
            <child-component :message="parentMessage"></child-component>
          </div>
        `,
        data() {
            return {
                //在父组件定义的消息，初始值
                parentMessage: 'hello from parent！！',
                newmessage: ''
            };
        },
        methods: {
            sendhand() {
                //更新父组件中的消息
                this.parentMessage = this.newmessage;
            }
        }
    });
​
    new Vue({
        el: '#app',
    });
</script>
​
</body>
</html>

image-20240429154755045

【 3 】子传父

# https://element.eleme.cn/#/zh-CN/component/drawer

image-20240429144502992

当子组件向父组件传递数据时，有几个重要的注意事项和步骤：

  1. 使用自定义事件： 子组件需要通过 Vue.js 的 $emit 方法来触发一个自定义事件，并在事件中传递数据。

  2. 在父组件中监听事件： 父组件需要在模板中使用 v-on 或简写 @ 来监听子组件触发的自定义事件，并在相应的方法中处理数据。

  3. 传递数据： 子组件在触发自定义事件时，需要将要传递的数据作为参数传入 $emit 方法中。

  4. 在父组件中接收数据： 父组件在监听到子组件触发的自定义事件后，会执行相应的方法。这个方法的参数就是子组件传递过来的数据。

  5. 绑定数据到子组件： 父组件可以通过向子组件传递 props 的方式，将数据传递给子组件。

具体步骤如下：

  • 子组件：

    • 创建一个需要触发事件的交互，比如点击按钮。

    • 在需要传递数据的交互中，使用 $emit 方法触发一个自定义事件，并将要传递的数据作为参数传入。

  • 父组件：

    • 在模板中使用子组件，并使用 v-on 或 @ 监听子组件触发的自定义事件。

    • 在监听到事件后，执行相应的方法来处理传递过来的数据。

这样就完成了子组件向父组件传递数据的过程。

关键步骤包括：

  1. 子组件触发自定义事件并传递数据：

    • 在子组件中使用$emit方法触发一个自定义事件，并在需要时传递数据。

    示例：

    this.$emit('childEvent', eventData);

  2. 父组件监听子组件的事件：

    • 在父组件中使用子组件标签上的@事件名来监听子组件触发的事件，并在触发事件时执行相应的方法。

    示例：

    <!-- 父组件中监听子组件的事件 -->
<child-component @childEvent="handleChildEvent"></child-component>

  3. 父组件处理接收到的数据：

    • 在父组件中定义一个方法来处理接收到的子组件传递的数据，这个方法会在子组件触发相应的事件时被调用。

    示例：

    methods: {
    handleChildEvent(data) {
        // 处理接收到的子组件传递的数据
        console.log('Received data from child component:', data);
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Props Example</title>
    <!--  bootstrap  -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--  Vue  -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <!--  axios  -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
​
</head>
<body>
​
<div id="app">
    <h1>组件的使用-子传父</h1>
    <!--  这里的URL就是父组件的  -->
    <parent-component></parent-component>
​
</div>
​
<script>
​
    // 子组件定义
    Vue.component('child-component', {
​
        // 子组件接收父组件传递过来的数据
        props: ['message'],
        template: `<div>
          <button @click="sendparent">像父组件传值</button>
          <hr>
        </div>`,
​
​
        methods: {
            sendparent() {
                this.$emit('child-event',"我是子组件发来的数据！！！");
            },
​
        },
    });
    Vue.component('parent-component',{
        data(){
            return{
                // 初始化为空值
                text:'',
            }
        },
        template: `
        <div>
            <input type="text" v-model="text" placeholder="从子组件接收的消息">
​
<!--    注意要跟子组件的  @child-event="handleChildEvent"要跟自定义事件名字保持一致    -->
​
            <child-component @child-event="recep_chlid"></child-component>
            <p>来自子组件的消息: {{ text }}</p>
        </div>
        `,
        methods: {
            recep_chlid(message){
                // 接收子组件传递的数据，并将其保存在父组件的数据中
​
                this.text=message;
            }
        }
    })
​
    new Vue({
        el:'#app',
​
    })
​
</script>
​
</body>
</html>

image-20240429155309805

【 4 】ref 之间的通信

# 1 ref 是个属性，可以放在
    -普通标签上：拿到dom对象
    -组件上：拿到组件对象--》直接调用组件对象的属性或方法

  • 基本的使用

    • 我用ref设置了两个标签 this.$refs就会想一个字典一样出现两个对象。

    • <img src="https://pic.netbian.com/uploads/allimg/240503/010122-1714669282ef4c.jpg"
     alt="" height="300px" width="250px" ref="photo">
<input type="text" ref="TextInput">
    • methods:{
           handleClik(){
               // this 是当前的vue实例
               console.log(this.$refs)
           }
       }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
​
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
​
<div id="one">
    <h1>组件 ref属性-放在普通标签上</h1>
    <img src="https://pic.netbian.com/uploads/allimg/240503/010122-1714669282ef4c.jpg"
         alt="" height="300px" width="250px" ref="photo">
    <input type="text" ref="TextInput">
​
    <button @click="handleClik">点我 me</button>
​
</div>
​
</body>
</html>
​
​
<script>
    Vue.component("all_parent",{
        template:`
        <div>
        <span style="text-align: left; font-family: 'Arial Black'" >我是全局组件</span>
</div>`
        }
​
    )
​
    var vm = new Vue({
        el:'#one',
        data:{
​
        },
        methods:{
            handleClik(){
                // this 是当前的vue实例
                console.log(this.$refs)
            }
        }
    })
​
​
​
</script>

image-20240505210801980

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>组件使用-ref属性-放在组件上</h1>
    <Child1 ref="mychild"></Child1>
​
    <button @click="handleShow">点我看控制台</button>
​
​
​
</div>
</body>
<script>
​
​
    // 1 定义全局组件
    Vue.component('Child1', {
        template: `
          <div>
            <div style="width: 300px;display: flex;justify-content:space-between;border: aquamarine solid 1px">
              <span @click="handleBack">后退</span>
              <span @click="handleChange">{{ title }}</span>
              <span>前进</span>
              <br>
            </div>
            <div>
              <img :src="url" alt="" height="300px" width="250px">
            </div>
          </div>`,
        data() {
            return {
                title: 'Child1',
                url: 'https://wx1.sinaimg.cn/mw690/003yHo7Nly1hp5bg9itehj60u00u0qdo02.jpg'
            }
        },
        methods: {
            handleBack() {
                alert('后退了')
            },
            handleChange(url){
                this.url=url
            }
        },
    })
​
​
    // 2 定义局部组件---》定义在组件内部的---》
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods:{
            handleShow(){
                // this 是当前vue实例
                // this.$refs 是在组件中所有标签设置了ref属性的 字典 {mychild:组件对象}
                console.log(this.$refs)
                // this.$refs.mychild  拿到组件对象---》组件对象.属性   组件对象.方法
                //1 拿到组件对象的属性--》在父中，拿到了子的变量--》子传父
                console.log(this.$refs.mychild.title)
                //2 修改组件对象的属性--》在父中，修改子的属性--》父传子
                this.$refs.mychild.title='首页'
​
                // 3 调用子组件中的函数
                this.$refs.mychild.handleChange('https://pic.netbian.com/uploads/allimg/240325/201846-171136912696d8.jpg')
​
​
​
​
            }
        }
​
​
    })
​
​
</script>
</html>
​
小结

  1. 在父组件中使用ref属性将子组件实例引用到父组件中。

<Child1 ref="mychild"></Child1>

  1. 在父组件的方法中，通过this.$refs访问ref引用的子组件实例。

handleShow() {
    console.log(this.$refs);
}

  1. 通过this.$refs访问子组件的属性和方法，实现父子组件之间的通信。

// 访问子组件的属性
console.log(this.$refs.mychild.title);
​
// 修改子组件的属性
this.$refs.mychild.title = '首页';
​
// 调用子组件的方法
this.$refs.mychild.handleChange('https://pic.netbian.com/uploads/allimg/240325/201846-171136912696d8
【 1 】动态组件

image-20240505223059355

  1. 定义组件：首先，定义了三个组件 goods、ke 和 yun。

  2. 在模板中使用动态组件：通过 <component :is="Chilkand"></component> 来使用动态组件。Chilkand 是一个变量，它的值决定了显示哪个组件。

  3. 切换组件：通过点击不同的按钮来改变 Chilkand 变量的值，从而切换显示不同的组件。

  4. 组件的初始值：在 Vue 实例的 data 中初始化了 Chilkand 变量，它的初始值为 "goods"，因此页面加载时会显示 goods 组件。

  • 不使用动态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
​
    <style>
        .shang{
            display: flex;
            justify-content: center;
        }
​
        .jia{
            width: 150px;
            height: 50px;
            background-color: pink;
            font-size: 25px;
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div id="one">
    <h1>动态组件的使用方法</h1>
    <div class="shang">
        <div class="jia" @click="Chilkand='goods'">
            <span>课程</span>
        </div>
​
        <div class="jia" @click="Chilkand='ke'">
            <span>语文</span>
        </div>
​
        <div class="jia" @click="Chilkand='yun'">
            <span>王老师</span>
        </div>
    </div>
​
​
    <div>
<!--                不使用动态组件 -->
                <goods v-if="Chilkand=='goods'"></goods>
                <ke v-else-if="Chilkand=='ke'"></ke>
                <yun v-else></yun>
​
​
​
    </div>
</div>
</body>
<script>
​
    //定义三个组件
    Vue.component('goods',{
        template:`<div>
                    <h2>课程列表</h2>
​
                    <br>
                    Endlsh
​
</div>`,
    })
    Vue.component('ke',{
        template:`<div>
                    <h2>语文</h2>
​
                    <br>
                    yuwen
​
</div>`,
    })
    Vue.component('yun',{
        template:`<div>
                    <h2>sir 刘</h2>
​
                    <br>
                    tian
​
</div>`,
    })
​
​
​
    var vm = new Vue({
        el:'#one',
        data:{
            Chilkand:"goods"
        }
    })
​
​
​
</script>
</html>

image-20240505222407833

  • 使用动态组件

        <!--   使用动态组件     -->
        <keep-alive>
            <component :is="Chilkand"></component>
        </keep-alive>
m0_58310590
关注
  • 29
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
组件间通信的几种方式
qq_45776662的博客
10-12 3639
组件间通信， vue事件总线， tiny-emmity, mitt, props, refs, emit, provide, inject, attr , listener, vue组件， vue通信， vue 值传递
八种Vue组件间通讯方式合集(推荐)
10-14
本文将详细讲解八种在Vue中实现组件间通讯的方法，帮助开发者更好地理解和掌握Vue的通信机制。 1、**Props（属性）**：这是最基础的父子组件通讯方式。父组件可以通过`props`向子组件传递数据。在父组件中，通过`:...
Vue组件间的通讯方式
qq_40063198的博客
06-27 1012
Vue组件间的通讯方式
【干货】Vue3 组件通信方式详解
最新发布
dsgdauigfs的博客
06-27 1004
毫无疑问，组件通信是Vue中非常重要的技术之一，它的出现能够使我们非常方便的在不同组件之间进行数据的传递，以达到数据交互的效果。所以，学习组件通信技术是非常有必要的，本文将总结Vue中关于组件通信的八种方式，帮助大家在使用Vue的过程中更加得心应手！如果文中有不对、疑惑的地方，欢迎在评论区留言指正！！在开始之前我们需要明白什么是组件通信，组件通信可以拆分为两个部分：组件通信都知道组件是vue最强大的功能之一，vue中每一个.vue文件我们都可以视之为一个组件，简单来说组件就是对UI结构的复用。
组件通信的方法
HQ\(^o^)/的博客
09-02 1409
1.props 通过属性传值，子props接收2.$emit/v-on 父组件使用子组件声明的自定义事件，传值时触发3.v-model 原理即props与$emit；父：v-model="值"、子：this.$emit('input',值)4..sync 原理即：属性名& this.$emit('update:属性名', 值)5.refs 操作dom，通过this.$refs6.$children/$parent this.$children获取所有子组件的数组对象，包括子组件的属性和监听事件；
组件间通信
m0_63685436的博客
11-06 818
vue的学习
组件间的通信方式
weixin_43933771的博客
07-19 1131
父子组件间通信 基础的传递不再赘述，这里只说明一些重要的注意点。 1，父传子：相信大家对父传子都很熟悉，但是其实在这个过程中也是有很多注意事项的。 props的两种常见用法： 方式一：字符串数组，数组中的字符串就是attribute的名称，数组用法中我们只能说明传入的attribute的名称，并不能对其进行任何形式的限制，所以一般不建议使用。 props: ['title', 'content'] 方式二：对象类型，对象类型我们可以在指定attribute名称的同时，指定它需要传递的类型、是否是必须的、默
vue组件之间通信方式实例总结【8种方式】
10-17
【Vue组件之间通信方式实例总结】 在Vue.js中，组件间的通信是构建复杂应用的关键。以下将详细解析8种常见的Vue组件通信方式： 1. **Props和$emit** - 父组件向子组件传递数据是通过`props`属性进行的。在子组件...
Vue.js组件间通信方式总结【推荐】
10-17
Event Bus是一种在组件之间任意传递消息的方法，可以使用一个空的Vue实例作为中央事件总线（bus），通过`$emit`和`$on`方法来传递事件。 例如，创建一个中央事件总线： ```javascript // eventBus.js import Vue ...
react-react面试题之组件之间的通信方式.zip
03-20
1. **props（属性）**：这是最基本的组件间通信方式。父组件可以通过props向子组件传递数据。例如，父组件可以设置一个`name`属性，将其值传递给子组件，然后子组件通过`this.props.name`来访问这个值。 2. **回调...
11.（vue3.x+vite）组件间通信方式之ref与$parent、$children.rar
09-19
在这个"11.（vue3.x+vite）组件间通信方式之ref与$parent、$children.rar"的压缩包中，我们可能会看到如何利用新的特性来实现组件间的通信。以下是对这些知识点的详细说明： 1. **Vue3.x**：Vue3.x是Vue.js的最新...
组件之间的通讯方式
Wu_shuxuan的博客
08-10 626
props emit 父组件与子组件通信，通过属性传值的方法。 子组件通过事件传值与父组件 （子 emit=>change 父） 监听 跨级组件里用监听数据的改变 状态管理（redux,vuex,ngrx） 父子组件，兄弟组件，跨级组件都可以利用状态管理进行通讯 refs refs如果作用在dom元素上，引用的就是dom元素；如果作用在组件上，引用的就是该组件， <component refs="child01" /> // this.$refs..child01 con
组件通信的6种方式
热门推荐
caigoutu的博客
06-20 1万+
vue组件通信的6种方式
组件通信
tangren_wyx的博客
04-22 311
1. 父子组件通信 A: 绑定的是简单类型数据 父组件中定义数据， 通过单向数据绑定的形式， 将数据绑定在子组件身上， 属性是自定义属性， 子组件通过配置项中的props接收数据， props可以是一个数组，数组中放的是自定义属性名称 那么这个自定义属性可以向data中的数据一样直接在子组件模板中使用 父组件中数据一旦修改， 子组件数据就会修改， 那么这也就是单项数据流 <div id...
组件间的通信方式（三种）
m0_64562972的博客
11-20 1349
组件间的通信方式
组件之间的通讯
WS_0201的博客
02-09 811
组件之间的通讯 1.父组件传到子组件 父组件是通过props属性给子组件通信的 数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告） 父组件代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->
组件间通信方式
ivolcano的博客
05-03 368
一种组件间通信方式 QHOServiceManager 是我们推出的业务间通信的解决方案，方便客户端不同的业务仓库之间进行交互。解决不同业务库代码需要互相调用，但是不能直接依赖代码的问题。 没有看懂？没关系，简单来说，当你想要用其他业务库的代码逻辑，却不想，或者，不能把其他业务 pod 添加到你的 podspec 时，你可能就是 QHOServiceManager 的潜在用户。 问题的起因和...
vue组件间通信方式
10-08
vue组件间通信方式有多种，其中包括： 1. 使用props和$emit：父组件通过props向子组件传递数据，子组件通过$emit触发事件，将数据传递回父组件。 2. 使用$refs：父组件通过ref属性引用子组件的实例，可以直接通过$refs来访问子组件的数据和方法。 3. 使用provide和inject：父组件通过provide提供数据或方法，子组件通过inject来接收提供的数据或方法。 4. 使用vuex状态管理：通过vuex来集中管理组件间共享的状态，任何组件都可以直接访问和修改这些状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值