Vuejs 组件

最新推荐文章于 2022-10-14 09:21:41 发布
最新推荐文章于 2022-10-14 09:21:41 发布
阅读量228 收藏
点赞数
分类专栏： Vuejs 前端 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/UserPython/article/details/108326097
版权

组件的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id='app'>
  <!-- 3、使用组件，必须在Vue挂载实例中使用 -->
  <!-- 全局组件可以在任意Vue挂载实例中使用 -->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
</div>

<script>
  // 1、创建组件构造器对象
  const cpnC = Vue.extend({
    // 代表自定义组件模板
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容1</p>
        <p>我是内容2</p>
      </div>
    `
  });

  // 2、注册组件（组件标签名， 组件构造器对象）
  // 全局组件，意味着可以在多个Vue实例下面使用
  Vue.component('my-cpn', cpnC);


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

</body>
</html>

注册局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id='app'>
  <!-- 3、使用组件，必须在Vue挂载实例中使用 -->
  <cpn></cpn>
  <cpn></cpn>
</div>

<div id="app2">
<!-- 局部组件在其他Vue挂载中无法使用 -->
  <cpn></cpn>
</div>

<script>
  // 1、创建组件构造器对象
  const cpnC = Vue.extend({
    // 代表自定义组件模板
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容1</p>
        <p>我是内容2</p>
      </div>
    `
  });

  const app = new Vue({ 
    el: '#app',
    
    // 局部组件
    // 2、注册组件
    components: {
      cpn:cpnC
    }
    });

  const app2 = new Vue({ el: '#app2' })
</script>

</body>
</html>

父组件与子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id='app'>
  <!-- 使用组件 -->
  <cpn2></cpn2>
</div>

<script>
  // 1、创建第一个组件构造器(子组件)
  const cpnC1 = Vue.extend({
    template: `
      <div>
        <h2>我是标题1</h2>
        <p>我是内容。。。。。。</p>
      </div>
    `
  })

  // 2、创建第二个组件构造器(父组件)
  const cpnC2 = Vue.extend({
    template: `
      <div>
        <h2>我是标题2</h2>
        <p>我是内容。。。。。。</p>
        <cpn1></cpn1>
      </div>
    `,
    components: {
      cpn1: cpnC1
    }
  })

  // root组件
  const app = new Vue({
    el: '#app',
    components: {
      cpn2: cpnC2
    }
  })
</script>

</body>
</html>

注册组件语法糖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id='app'>
  <!-- 使用组件 -->
  <global-tag></global-tag>
  <localtag></localtag>
</div>

<script>
  // 组件语法糖
  // 全局组件
  Vue.component('global-tag', {
    template: `
      <div>
        <h2>我是全局组件标题</h2>
        <p>我是内容。。。。。。</p>
      </div>
    `
  })

  // root组件
  const app = new Vue({
    el: '#app',
    components: {
      // 局部组件语法糖
      localtag: {
        template: `
          <div>
            <h2>我是局部组件标题</h2>
            <p>我是内容。。。。。。</p>
          </div>
        `
      }
    }
  })
</script>

</body>
</html>

组件模板分离的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id='app'>
  <!-- 使用组件 -->
  <global-tag></global-tag>
  <localtag></localtag>
</div>
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++ -->

<!-- 1.模板分离写法一: script标签，要注意类型 -->
<script type='text/x-template' id='cpn'>
  <div>
    <h2>我是全局组件标题</h2>
    <p>我是内容。。。。。。</p>
  </div>
</script>

<!-- 2.模板分离写法一: template标签 -->
<template id='cpn2'>
  <div>
    <h2>我是局部组件标题</h2>
    <p>我是内容。。。。。。</p>
  </div>
</template>
<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->

<script>
  // 组件语法糖
  // 全局组件
  Vue.component('global-tag', {
    template: '#cpn'
  })

  // root组件
  const app = new Vue({
    el: '#app',
    components: {
      // 局部组件语法糖
      localtag: {
        template: '#cpn2'
      }
    }
  })
</script>

</body>
</html>

组件中数据存放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id='app'>
  <!-- 使用组件 -->
  <global-tag></global-tag>
  <localtag></localtag>
</div>
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++ -->

<!-- 组件模板分离 -->
<template id='cpn'>
  <div>
    <!-- 组件中数据存放 -->
    <h2>{{title}}</h2>
    <p>{{content}}</p>
  </div>
</template>
<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->

<script>
  // 全局组件
  Vue.component('global-tag', {
    template: '#cpn',
    data() {
      return {
        title: "我是全局组件标题。。。",
        content: "我是全局组件的内容。。。。。。"
      }
    }
  })

  // root组件
  const app = new Vue({
    el: '#app',
    // 局部组件
    components: { 
      // 组件名
      localtag: {
        // 绑定的模板
        template: '#cpn',
        // 组件数据
        // data属性必须是一个函数，而且这个函数返回一个对象，对象内部保存着数据
        data() {
          return {
            title: '我是局部组件标题。。。',
            content: "我是局部组件的内容。。。。。。"
          }
        }
      }
    }
  })
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id='app'>
  <!-- -----------使用组件----------------- -->
  <global-tag></global-tag>
  <global-tag></global-tag>
  <global-tag></global-tag>
</div>
<!-- ===================================== -->

<!-- -----------组件模板----------------- -->
<template id='cpn'>
  <div>
    <h2>当前计数：{{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>
<!-- ======================================= -->

<script>
  // 全局组件
  Vue.component('global-tag', {
    template: '#cpn',
    data() {
      return {
        counter: 0
      }
    },
    methods: {
        increment(){
          this.counter++
        },
        decrement(){
          this.counter--
        }
    }
  })

  // root组件
  const app = new Vue({ el: '#app' })
</script>

</body>
</html>

父子组件的通信

父传子props

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id='app'>
  <!-- -----------使用组件----------------- -->
  <soncpn :smessage="message" :smovies='movies'></soncpn>
</div>
<!-- ===================================== -->

<!-- --------------组件模板----------------- -->
<template id='son-temp'>
  <div>
    <h2>{{smessage}}</h2>
    <p>{{smovies}}</p>
    <ul>
      <li v-for="item in smovies">{{item}}</li>
    </ul>
  </div>
</template>
<!-- ======================================= -->

<script>

  // 父传子：props
  const soncpn = {
    template: '#son-temp',
    // 数组写法
    // props: ['smessage', 'smovies'],

    // 对象写法：可以对数据进行类型限制
    // props: {
    //   smessage: String,
    //   smovies: Array
    // },

    // 对象写法：可以对数据提供一些默认值
    props: {
      smessage: {
        type: String,
        default: 'aaaa',
        // 表示必填的字符串
        // required: true
      },
      smovies: {
        // 类型是对象或者数组时，默认值必须是一个函数
        type: Array,
        default(){
          return ['1', '2', '3']
        }
      }
    }
  }

  // root组件
  const app = new Vue({ 
    el: '#app',
    data: {
      message: '电影清单',
      movies: ['如果可以重来', '高中时代', '初中的懵懂'],
    },
    components: {
      soncpn
    },
  })
</script>

</body>
</html>

子传父（自定义事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>

<!-- 父组件模板 -->
<div id='app'>
  <!-- 父组件监听发射过来的自定义事件 -->
  <h2>计数器：{{count}}</h2>
  <soncpn @increment="changeCount" @decrement='changeCount'></soncpn>
</div>
<!-- ===================================== -->

<!-- 子组件模板 -->
<template id='son-temp'>
  <div>
    <button @click='add(count)'>+</button>
    <button @click='sub(count)'>-</button>
  </div>
</template>
<!-- ======================================= -->

<script>
  // 子组件
  const soncpn = {
    template: '#son-temp',
    data() {
      return {
        count: 0
      }
    },
    methods: {
      add(count){
        // console.log(this.count++)
        // 向父组件发射一个自定义事件
        this.count++
        this.$emit('increment', this.count)
      },
      sub(){
        this.count--
        this.$emit('decrement', this.count)
      }
    }
  }

  // 父组件
  const app = new Vue({ 
    el: '#app',
    data: {
      count: 0
    },
    methods: {
      changeCount(count){
        this.count = count
      }
    },
    components: {
      soncpn
    },
  })
</script>

</body>
</html>

父组件访问子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>

<!-- 父组件模板 -->
<div id='app'>
  <soncpn></soncpn>
  <soncpn></soncpn>
  <soncpn></soncpn>
  <button @click='btnClick'>按钮</button>
</div>
<!-- ===================================== -->

<!-- 子组件模板 -->
<template id='son-temp'>
  <div>我是子组件</div>
</template>
<!-- ======================================= -->

<script>
  // 父组件
  const app = new Vue({ 
    el: '#app',
    data: {
      message: 'hello'
    },
    methods: {
      btnClick(){
        // 1、$children：获取所有子组件
        console.log(this.$children);
        this.$children[0].showMessage();
        console.log(this.$children[0].name)
      }
    },
    // 子组件
    components: {
      soncpn : {
        template: '#son-temp',
        data() {
          return {
            name : 'kuse'
          }
        },
        methods: {
          showMessage(){
            console.log("hi-------kuse")
          }
        }
      }
    },
  })
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>

<!-- 父组件模板 -->
<div id='app'>
  <soncpn ref='aaa'></soncpn>
  <soncpn></soncpn>
  <soncpn></soncpn>
  <button @click='btnClick'>按钮</button>
</div>
<!-- ===================================== -->

<!-- 子组件模板 -->
<template id='son-temp'>
  <div>我是子组件</div>
</template>
<!-- ======================================= -->

<script>
  // 父组件
  const app = new Vue({ 
    el: '#app',
    data: {
      message: 'hello'
    },
    methods: {
      btnClick(){
        // 2、$refs: （获得指定子组件）对象类型，默认是一个空的对象 ref = '对象名'
        console.log(this.$refs);
        console.log(this.$refs.aaa);
        console.log(this.$refs.aaa.name);
        this.$refs.aaa.showMessage();
      }
    },
    // 子组件
    components: {
      soncpn : {
        template: '#son-temp',
        data() {
          return {
            name : 'kuse'
          }
        },
        methods: {
          showMessage(){
            console.log("hi-------kuse")
          }
        }
      }
    },
  })
</script>

</body>
</html>

插槽 slot

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>

<!-- 父组件模板 -->
<div id='app'>
  <soncpn></soncpn>

  <soncpn>
    <!-- 插槽放在子组件标签内 -->
    <button>插槽</button>
  </soncpn>

  <soncpn>
    <span style="color:red">我是通过插槽插进来的</span>
  </soncpn>

  <soncpn>
    <!-- 子组件标签内有多个值时，都会替换 -->
    <p style="color:red">我是通过插槽插进来的--</p>
    <p style="color:red">我是通过插槽插进来的--</p>
    <p style="color:red">我是通过插槽插进来的--</p>
  </soncpn>

</div>
<!-- ===================================== -->

<!-- 子组件模板 -->
<template id='son-temp'>
  <div>
    <h1>子组件</h1>
    <div>我是子组件</div>
    <slot>
      <p>插槽的默认内容，当调用子组件没有添加插槽内容时，显示默认内容，如果自定义了插槽，则默认内容会被覆盖</p>
    </slot>
  </div>
</template>
<!-- ======================================= -->

<script>
  // 父组件
  const app = new Vue({ 
    el: '#app',
    data: {
      message: 'hello'
    },
    // 子组件
    components: {
      soncpn : {
        template: '#son-temp',
      },
    }
  })
</script>

</body>
</html>

具名插槽

  • 一个不带 name 的 < slot > 出口会带有隐含的名字“default”
  • 在向具名插槽提供内容的时候，我们可以在一个 < template > 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称
  • 现在 < template > 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 < template > 中的内容都会被视为默认插槽的内容
  • 然而，如果你希望更明确一些，仍然可以在一个 < template > 中包裹默认插槽的内容
  • 注意 v-slot 只能添加在 < template > 上
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>

<!-- 父组件模板 -->
<div id='app'>
  <soncpn>
    <template v-slot:left>
      <i>---左边---</i>
    </template>

    <template v-slot:default>
      <h1>---标题---</h1>      
    </template>


    <template v-slot:right>
      <b>---右边---</b>
    </template>
  </soncpn>
</div>
<!-- ===================================== -->

<!-- 子组件模板 -->
<template id='son-temp'>
  <div>
    <slot name='left'>
      <p>左边</p>
    </slot>

    <slot>
      <p>中间</p>
    </slot>

    <slot name='right'>
      <p>右边</p>
    </slot>
  </div>
</template>
<!-- ======================================= -->

<script>
  // 父组件
  const app = new Vue({ 
    el: '#app',
    data: {
      message: 'hello'
    },
    // 子组件
    components: {
      soncpn : {
        template: '#son-temp',
      },
    }
  })
</script>

</body>
</html>

插槽作用域

父组件替换插槽的标签，但是内容还是由子组件来提供

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>

<!-- 父组件模板 -->
<div id='app'>
  <soncpn></soncpn>

  <soncpn>
    <!-- 定义一个引用作用域名，并指向所引用的插槽对象 -->
    <template v-slot:default='slotProps'>
      <!-- 通过上面定义的作用域名来访问插槽原来数据 -->
      <span v-for='item in slotProps.data'>{{item}} ++ </span>
      <hr>
      <span>{{slotProps}}</span>
    </template>
  </soncpn>

</div>
<!-- ===================================== -->

<!-- 子组件模板 -->
<template id='son-temp'>
  <div>
    <!-- 为了codeLang在父级的插槽可用，我们将codeLang绑定到<slot>元素上 -->
    <!-- 绑定在<slot> 元素上的属性称为插槽props-->
    <!-- 这样我们在父级作用域中，我们就可以使用带值的v-slot来定义我们提供插槽props的名字 -->
    <slot :data='codeLang'>
      <ul>
        <li v-for="item in codeLang">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>
<!-- ======================================= -->

<script>
  // 父组件
  const app = new Vue({ 
    el: '#app',
    // 子组件
    components: {
      soncpn : {
        template: '#son-temp',
        data(){
          return {
            codeLang : ['c', 'c++', 'java', 'python', 'js']
          }
        }
      },
    }
  })
</script>

</body>
</html>
苦涩2020
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuejs 组件_组件VueJS模拟终端
cuk5340的博客
07-31 978
vuejs 组件 贝壳 (vue-shell) vue-shell is a component vuejs to provides an easy way to create a terminal on your application and then add your own philosophy by adding all the commands you want with their ...
vuejs 组件_VueJS 2的头像组件
cuk5239的博客
07-26 265
vuejs 组件 Vue头像 (VueAvatar) Avatar component for VueJS 2 VueJS 2的头像组件 Use username to create letter avatar (up to 3 chars) 使用用户名创建字母头像(最多3个字符) If an image src is provided, will try to use it as avat...
vue.js组件详解
wanglingli95的博客
03-06 3017
一、组件的概念及复用 1.1 为什么要使用组件 组件（component）是vue.js最核心的功能，也是整个框架最精彩的地方，当然也最难掌握。 组件是可复用的 Vue 实例, 把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可那么我们可以将其抽出为一个组件进行复用。例如页面头部、侧边、内容区，尾部，上传图片，等多个页面要用到一样的就可以做成组件，提高了代码的复用率。 1.2 组件的复用 1.2.1 使用props传递数据的基本用法 组件不仅仅是把模板的内容
Vue.js 创建Vue组件的方式
C.
02-24 4159
文章目录定义Vue组件全局组件定义的三种方式定义实例内部私有组件 定义Vue组件 什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可； 组件化和模块化的不同： 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一； 组件化： 是从UI界面的角度进行划分的；前...
Vue7：组件
menglong0329的博客
05-26 441
Vue.js 组件 组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 注册一个全局组件语法格式如下： Vue.component(tagName, options) tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件： <tagName></tagName&g.
VueJS 组件 基础及其例子
种麦南山下的博客
10-14 310
VueJS 组件 基础及其例子
VueBoot：使用Bootstrap编写的Vuejs组件和指令
cuk5239的博客
07-19 195
VueBoot (VueBoot) Vuejs components and directives written using Bootstrap v4, leveraging the official Bootstrap JS. 利用Bootstrap v4编写的Vuejs组件和指令，并利用官方的Bootstrap JS。 Note: This should be considered p...
Vuejs——（８）Vuejs组件的定义
qq20004604的博客
09-04 2127
本篇资料来于官方文档： http://cn.vuejs.org/guide/components.html 本文是在官方文档的基础上，更加细致的说明，代码更多更全。 简单来说，更适合新手阅读 （二十五）组件的定义 ①组件的作用： 【1】扩展HTML元素，封装可重用的代码； 【2】组件是自定义元素，Vuejs的编译器可以为其添加特殊的功能； 【3】某些情况
vuejs组件使用问题
d_good的博客
05-15 1072
vue table设置默认选中项 vue tree组件自定义渲染内容
vuejs组件-选择人员
08-23
在“vuejs组件-选择人员”这个主题中，我们主要关注的是如何使用Vue.js来创建一个用于选择人员的组件。下面将详细介绍这个过程中涉及到的关键知识点。 1. **Vue.js组件**：Vue.js组件是可复用的代码块，它们可以...
VueJs组件prop验证简单介绍
10-19
今天看了vuejs的组件，看到了prop组件，主要作用是在传入数据的时候对传入的值做判断，今天小编通过一个小例子给大家分享VueJs组件prop验证简单理解，感兴趣的朋友一起看看吧
vuejs组件.docx
11-22
Vue.js 组件是框架的核心特性，它允许开发者将复杂的应用拆分成多个独立的、可复用的部件。组件系统的设计灵感来源于 Web Components 规范，但 Vue.js 提供了更平滑的集成方式，使得组件在不同的上下文中都能无缝...
Vuejs组件生成器
08-13
"Vuejs组件生成器"是一个专门用于简化Vue.js组件创建过程的工具，它可以帮助开发者快速生成符合规范的组件模板，从而节省手动编写基础结构的时间。 Vue组件是Vue.js中的基本构建块，它们可以被视为自包含的代码单元...
Vuejs组件风格指南
08-10
以下是对"Vuejs组件风格指南"的详细解释： 一、组件命名 1. 使用kebab-case（短横线命名）：Vue.js推荐在模板和HTML中使用kebab-case（如`<my-component>`），而在JavaScript中使用PascalCase（如`MyComponent`）。...
基于JavaScript实现网页计算器
苦涩
04-04 2601
基于JavaScript的网页计算器 基于HTML、CSS、JavaScript制作的网页计算器，其中可以实现加、减、乘、除、取整、求余、阶乘、科学计数等功能 界面如下： 有兴趣的朋友可以继续完善 ^ _ ^ 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
JavaScript 获取元素及事件
苦涩
06-19 2087
使用ID获取元素对象 document.getElementById( “ID” );：返回文档中一个指定ID的元素对象，用于精确获取；若找到则返回该元素对象，否则返回null 获取或设置元素内容 innerText方法 元素对象.innerText = “文本”：返回或设置标签内的文本值，不包含HTML标签 <div id="zxw">id选择器</div> <script> var zxw = document.getElementById("zxw.
基于CSS3实现垂直轮播效果
苦涩
05-31 1599
效果图 方法：使用动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <style type="text/css"> .box{ .
HTML5 canvas组件
苦涩
07-06 1424
canvas简介 canvas标签是用来绘制图像的 canvas本身没有绘画的能力，仅仅是图形的容器，相当于一块画板 必须要使用脚本完成绘制，JS canvas绘画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #can.
vuejs 组件_简单美观的卡片组件，带有优雅的VueJS火花线
最新发布
05-30
你可以尝试使用 Element UI 中的 Card 组件来实现一个简单美观的卡片组件。Element UI 是一个基于 Vue.js 的 UI 组件库，提供了许多...同时，还可以通过添加样式来实现优雅的 VueJS 火花线效果。 希望这可以帮到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值