vue——计算属性、侦听属性、组件、组件通信、ref属性、数据总线、动态组件、插槽

已于 2022-06-30 14:37:02 修改
阅读量252 收藏 1
点赞数
分类专栏： web框架 前端 文章标签： vue.js 前端 javascript
于 2022-06-29 22:01:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kdq18486588014/article/details/125522121
版权

系列文章目录

文章目录

一、计算属性

函数编写在computed中后将被编入vue实例中，可以作为一个属性直接使用，计算属性只有在它的相关依赖发生改变时才会重新求值。
如果编写时使用箭头函数this不再指向vue实例，不过可以添加一个参数，该参数为vue实例

# 输入在input框中的字符串最后一个字母将变为大写的
<div id="app">
    <p><input type="text" v-model="text1">输入：{{newText}}</p>
    <p>通过箭头函数输入：{{newText1}}</p>
</div>

var vm = new Vue({
        el:'#app',
        data:{
            text1:'',
        },
        computed:{
            newText(){
            # 此处由于是将最后一个字母大写，所以依赖不断的改变
                let len = this.text1.length
                return this.text1.substr(0, len-1) + this.text1.substr(len-1).toUpperCase()
            },
            newText1: v => {
                let len = v.text1.length
                return v.text1.substr(0, len-1) + v.text1.substr(len-1).toUpperCase()
            }
        },
    })

在这里插入图片描述

二、侦听属性

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

var vm = new Vue({
        el:'#app',
        data:{
            text1:'',
            ll:{
                kk:{
                    ff:'ff'
                }
            }
        },
        watch:{
        	// 该方法侦听text1是否被改变
            text1(val, oldval){
                console.log('text1被改变了，原来的值%s，新值%s',oldval, val)
            },
            // 该方法侦听ll是否被改变
            ll(val, oldval){
                console.log('ll被改变了，原来的值%s，新值%s',oldval, val)
            },
            // 该方法侦听ll中嵌套的kk是否被改变，可以不断向内获取
            'll.kk'(val, oldval){
                console.log('kk被改变了，原来的值%s，新值%s',oldval, val)
            },
        }
    })

三、组件

扩展 HTML 元素，封装可重用的代码，目的是复用，每个组件都有自己的html、css、js

1.组件的建立

组件创建可以有自己的template、data、methods、match等

需要注意的是：
1.自定义组件名称必须按照大驼峰命名或者使用至少一个-来连接，使用大驼峰命名在 DOM中会失效，所以推荐使用-的形式。如：ShowComponent或者show-component
2.template中必须只有一个根标签，书写template时使用反引号（推荐）或者字符串自由拼接dom（不推荐）
3.data不再和vue对象一样了，无论data中是否只有一个变量都需要编写为函数
4.组件中不可以使用components来进行组件局部注册，这样会产生组件循环嵌套，导致vue找不到组件

var componentA = { //componentA 自行定义名字
	template: `
	          <div>
	              <p>组件</p>
	              <p><button @click="showbtn">点击显示文字</button></p>
	              <p v-if="key">{{text}}</p>
	          </div>
	        `,
	// data是组件的数据，与别的组件互不影响
	data() {
	    return {
	        text:'文字1',
	        key:false,
	    }
	},
	// methods是组件的事件，与别的组件互不影响
	methods:{
	    showbtn(){
	        this.key = !this.key
	    }
	},
}

2.组件注册

组件标签名是自定的组件名

1.组件全局注册

// 直接绑定在全局的组件写法
    Vue.component('all-com', { //'all-com'为全局组件的标签名
        // 此处template是全局组件的样式
        template:`
            <div>
                <p>全局组件</p>
                <p><button @click="showbtn">点击显示文字</button></p>
                <p v-if="key">{{text}}</p>
            </div>
        `,
        // data是全局组件的数据，与别的组件互不影响
        data() {
            return {
                text:'文字1',
                key:false,
            }
        },
        // methods是全局组件的事件，与别的组件互不影响
        methods:{
            showbtn(){
                this.key = !this.key
            }
        },

    })

2.组件局部注册

局部注册可以在components中使用对象的形式注册或者直接编写

new Vue({
        el:'#app',
        data:{

        },
        components: {
            'self-coms': componentA, // 对象形式注册 'self-coms'为局部组件的标签名
            'component-code':{ //编写仅在该vue中使用的组件 'component-code'为局部组件的标签名
                template: `
                    <div>
                        <p>自定义组件1</p>
                    </div>
                `,
            }
        }
    })

四、组件通信

1.组件通信父传子（自定义属性)

父vue或者组件给子组件传递数据是需要使用到props的
props是单向数据流，使用props传递到子组件的数据实际上是引用型，也就是说子组件如果修改该传递过来的属性会影响到父的数据状态，所以子组件获得的属性一般不做数据修改。

1.首先在父vue中确保需要传递的数据存在，并且子组件已经注册为父vue的局部组件

new Vue({
        el:'#app',
        data:{
            text1:'根vue的data1', // 需要传递的数据1
            number1:11111, // 需要传递的数据2
        },
        components: {
            'self-coms': componentA, // 子组件为该vue的局部组件
        }
    })

2.在对应的子组件标签处绑定上对应数据

针对于绑定自定义属性给子组件
例如下方代码中:data1
其中：表示为动态绑定，动态绑定可以赋值变量、字符串、数据、对象等，不使用：为静态绑定，只能传递固定的字符串、数组、对象等
data1是自订的，该名字为子组件接收到的数据的名称

<all-com :data1="text1" :data2="number1" @get-data="faGetData"></all-com>

3.父vue传过来的数据的使用

父vue传递过来的数据可以直接使用也可以储存下来作为子组件自己的数据，注意储存下来的数据为引用型，修改该存储数据会改变父vue的数据，所以一般不会进行修改。

使用之前需要在props中绑定数据，绑定的数据名称为之前子组件上设置的自定义属性名

绑定完之后可以直接插值语法使用，也可以将该值赋给data中自己设置的变量

// 直接绑定在全局的组件写法
    Vue.component('all-com', {
        // 此处template是全局组件的样式
        template:`
            <div>
                <p>全局组件</p>
                <p><button @click="showbtn">点击显示文字</button></p>
                <p>父传子获取后直接使用{{data1}}</p>
                <p>父传子获取后储存下来作为本地数据使用{{text1}}</p>
            </div>
        `,
        // data是全局组件的数据，与别的组件互不影响
        data() {
            return {
                text:'文字1',
                text1: this.data1,
            }
        },
        // methods是全局组件的事件，与别的组件互不影响
        methods:{
            showbtn(){
                this.key = !this.key
            },
        },
        props:['data1','data2'], // 只需要获取父传过来的数据使用数组
    })

2.组件通信父传子props数据检验

检验父vue或者组件传递给子组件的数据主要在props中进行，获取父传过来的数据同时验证其类型，数据类型不对时会在控制台警告，警告只是一个提示

		props:['data1','data2'], // 只需要获取父传过来的数据使用数组
        props:{
            'data1':String, //验证传来的数据必须为string
            'data2':[Number,String]//验证传来的数据可以为多种时用数组
        },

3.组件通信子传父（自定义事件）

子组件传递数据给父vue或者组件是需要设置自定义函数来进行的

1.子组件中设置对应的事件
设置传递数据事件时可以使用任意触发形式，函数体为：

this.$emit('get-data', this.text2) 其中第一个参数为父类绑定事件的名字，后续可以添加n个参数，参数会依次作为变量传递到设定的事件中

// 直接绑定在全局的组件写法
    Vue.component('all-com', {
        // 此处template是全局组件的样式
        template:`
            <div>
                <p>全局组件</p>
                <p><button @click="clickbtn">发送数据给父</button></p>
            </div>
        `,
        // data是全局组件的数据，与别的组件互不影响
        data() {
            return {
                text2:'子的数据'
            }
        },
        // methods是全局组件的事件，与别的组件互不影响
        methods:{
            // 子传父数据
            clickbtn(){
                this.$emit('get-data', this.text2)
            },
        },
    })

2.为传递数据的子组件设置自定义函数

// 此处的@get-data是之前在this.$emit设置的第一个参数，自定义事件的值为父vue获取数据的事件
<all-com @get-data="faGetData"></all-com>

3.父组件设置获取数据的事件

new Vue({
        el:'#app',
        data:{
            son_data:'',
        },
        methods:{
            'faGetData'(data1){  # 在此处按照之前设置的父vue获取数据的事件名来设置事件
                this.son_data = data1
            }
        },
        components: {
            'self-coms': componentA,
        }
    })

五、ref属性

ref放在普通标签上，拿到的是原生节点,原生节点操作时只能使用js原生DOM语法来实现
ref放在组件上，拿到的是组件对象，组件对象可以获取其中变量、可以父传子或者子传父

1.通过ref获取普通标签

<div id="app">
    <button @click="clickbtn">点击查看ref</button>
    <p ref="pele"></p>
</div>

    new Vue({
        el:'#app',
        data:{

        },
        components: {
            'self-coms': componentA,
        },
        methods:{
            clickbtn(){
                this.$refs['pele'].innerText='pppppppppp' 
            }
        }

2.通过ref实现子传父

<div id="app">
    <button @click="clickbtn">点击查看ref</button>
    <all-com ref="allele"></all-com>
</div>

父vue代码

new Vue({
        el:'#app',
        data:{

        },
        components: {
            'self-coms': componentA,
        },
        methods:{
            clickbtn(){
                this.$refs.allele.getData()
                this.$refs['allele'].getData()
            }
        }
    })

子组件代码

// 直接绑定在全局的组件写法
    Vue.component('all-com', {
        // 此处template是全局组件的样式
        template:`
            <div>
                <p>全局组件</p>
            </div>
        `,
        // data是全局组件的数据，与别的组件互不影响
        data() {
            return {
                text:'文字1',
            }
        },
        // methods是全局组件的事件，与别的组件互不影响
        methods:{
            getData(){
                console.log(this.text)
            }
        },

    })

3.通过ref实现父传子

<div id="app">
    <button @click="clickbtn">点击查看ref</button>
    <all-com ref="allele"></all-com>
</div>

父vue代码

new Vue({
        el:'#app',
        data:{

        },
        components: {
            'self-coms': componentA,
        },
        methods:{
            clickbtn(){
                this.$refs.allele.setData('父传给子的值')
                this.$refs['allele'].setData('父传给子的值')
            }
        }
    })

子组件代码

// 直接绑定在全局的组件写法
    Vue.component('all-com', {
        // 此处template是全局组件的样式
        template:`
            <div>
                <p>全局组件</p>
            </div>
        `,
        // data是全局组件的数据，与别的组件互不影响
        data() {
            return {
                text:'文字1',
            }
        },
        // methods是全局组件的事件，与别的组件互不影响
        methods:{
            setData(data){
                console.log(data)
            },
        },

    })

六、数据总线

不同层级的不同组件通信，不再局限于父子之间通信

1.创建一个数据总线

var datas = new Vue()

2.在需要接收数据的组件或者vue设置mounted

		mounted(){
            datas.$on('wait', (data1)=>{
                this.text = data1
            })
        },

3.在发送数据的组件或者vue设置mounted

	mounted(){
            datas.$emit('wait', this.text)
        },

七、动态组件

通过component配合is属性，决定显示的组件是哪个，达成动态显示我们需要的组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li><button @click="comName='one'">组件1</button></li>
        <li><button @click="comName='two'">组件2</button></li>
        <li><button @click="comName='three'">组件3</button></li>
    </ul>
    <component :is="comName">

    </component>

</div>

</body>
<script>
    Vue.component('one', {
        template:`
            <div>
                <p>全局组件1</p>
            </div>
        `,
        data() {
            return {
            }
        },
    })
    Vue.component('two', {
        template:`
            <div>
                <p>全局组件2</p>
            </div>
        `,
        data() {
            return {
            }
        },
    })
    Vue.component('three', {
        template:`
            <div>
                <p>全局组件3</p>
            </div>
        `,
        data() {
            return {
            }
        },
    })

    new Vue({
        el:'#app',
        data:{
            comName:'one'
        },
    })
</script>
</html>

keep-alive标签可以保存之前组件输入的内容，本质是在切换别的组件时不销毁之前的组件

<keep-alive>
	<component :is="comName">

    </component>
</keep-alive>

八、插槽

1.匿名插槽

每个组件或者vue只能存在一个匿名插槽，插槽中的内容可以是标签、组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <all-com>
        <slot><all-com1></all-com1></slot> # 在对应需要插入的地方设置，然后去组建中设置
    </all-com>

</div>

</body>
<script>
    // 直接绑定在全局的组件写法
    Vue.component('all-com', {
        // 此处template是全局组件的样式
        template:`
            <div>
                <p>全局组件</p>
                <p>{{text}}</p>
                <slot></slot>
                <p>{{text1}}</p>
            </div>
        `,
        // data是全局组件的数据，与别的组件互不影响
        data() {
            return {
                text:'原有文字1',
                text1:'原有文字2'
            }
        },
    })

    // 直接绑定在全局的组件写法
    Vue.component('all-com1', {
        // 此处template是全局组件的样式
        template:`
            <div>
                <p>全局组件1</p>
                <p>{{text}}</p>
                <p>{{text1}}</p>
            </div>
        `,
        // data是全局组件的数据，与别的组件互不影响
        data() {
            return {
                text:'新原有文字1',
                text1:'新原有文字2'
            }
        },
    })

    new Vue({
        el:'#app',
        data:{

        },
    })
</script>
</html>

在这里插入图片描述

2.具名插槽

可以通过给slot设置name属性来制作多个插槽
显示区域使用v-slot:名称 来设置，名称需要对应上插槽内容的name

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <all-com>
        <slot v-slot:three></slot>
        <slot v-slot:two></slot>
        <slot v-slot:one></slot>
    </all-com>

</div>

</body>
<script>
    // 直接绑定在全局的组件写法
    Vue.component('all-com', {
        // 此处template是全局组件的样式
        template:`
            <div>
                <p>全局组件</p>
                <p>{{text}}</p>
                <p>打乱顺序反过来插入</p>
                <slot name="one"><p>这里是第二个插槽之前</p></slot>
                <slot name="two"><all-com1></all-com1></slot>
                <slot name="three"><p>这里是第二个插槽之后</p></slot>
                <p>{{text1}}</p>
            </div>
        `,
        // data是全局组件的数据，与别的组件互不影响
        data() {
            return {
                text:'原有文字1',
                text1:'原有文字2'
            }
        },
    })

    // 直接绑定在全局的组件写法
    Vue.component('all-com1', {
        // 此处template是全局组件的样式
        template:`
            <div>
                <p>全局组件1</p>
                <p>{{text}}</p>
                <p>{{text1}}</p>
            </div>
        `,
        // data是全局组件的数据，与别的组件互不影响
        data() {
            return {
                text:'新原有文字1',
                text1:'新原有文字2'
            }
        },
    })

    new Vue({
        el:'#app',
        data:{

        },
    })
</script>
</html>

在这里插入图片描述

3.作用域插槽

作用域插槽是带数据的插槽，子组件提供给父组件的参数
1.在子组件中设置

 <slot v-bind:text="text"></slot> v-bind:在父组件中使用的变量名="子组件中的变量名"

2.在需要使用子组件变量的地方为子组件标签绑定v-slot:default属性

<all-com v-slot:default="slotProps">  "slotProps"可以自己随意取名
        <slot v-slot:three></slot>
        <slot v-slot:two></slot>
        <slot v-slot:one></slot>
        偷过来的{{slotProps.text}}
    </all-com>

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <all-com v-slot:default="slotProps">
        <slot v-slot:three></slot>
        <slot v-slot:two></slot>
        <slot v-slot:one></slot>
        偷过来的{{slotProps.text}}
    </all-com>

</div>

</body>
<script>
    // 直接绑定在全局的组件写法
    Vue.component('all-com', {
        // 此处template是全局组件的样式
        template:`
            <div>
                <p>全局组件</p>
                <p>{{text}}</p>
                <p>打乱顺序反过来插入</p>
                <slot name="one" v-bind:text="text"><p>这里是第二个插槽之前</p></slot>
                <slot name="two"><all-com1></all-com1></slot>
                <slot name="three"><p>这里是第二个插槽之后</p></slot>
                <slot v-bind:text="text"></slot>
                <p>{{text1}}</p>
            </div>
        `,
        // data是全局组件的数据，与别的组件互不影响
        data() {
            return {
                text:'原有文字1',
                text1:'原有文字2'
            }
        },
    })

    // 直接绑定在全局的组件写法
    Vue.component('all-com1', {
        // 此处template是全局组件的样式
        template:`
            <div>
                <p>全局组件1</p>
                <p>{{text}}</p>
                <p>{{text1}}</p>
            </div>
        `,
        // data是全局组件的数据，与别的组件互不影响
        data() {
            return {
                text:'新原有文字1',
                text1:'新原有文字2'
            }
        },
    })

    new Vue({
        el:'#app',
        data:{

        },
    })
</script>
</html>

在这里插入图片描述

山上有个车
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 快速上手 - 组件、插槽、生命周期
雲的博客
08-02 265
Vue 快速上手 - 组件、插槽、生命周期
深入浅析Vue.js计算属性和侦听器
10-18
主要介绍了Vue.js计算属性和侦听器的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
vue组件通信大总结
张营的技术博客
03-13 256
文章目录1. props/$emit2. sync/update3. provide/inject4. \$attrs/\$listeners 1. props/$emit 父组件给子组件添加属性:msg="msg"传值，子组件通过props:['msg']接收； 子组件可以通过this.$emit('changeMsg','Welcome')向父组件发送事件和数据， 父组件通过 @changeMsg="change" 监听事件和传递过来的数据。 代码 <!-- Parent.vue --> &
Vue组件封装重要知识点
Vivien_CC的博客
04-01 902
通常,父组件通过props向下传递数据给子组件，而子组件则通过事件$emit向上发送消息给父组件.有时，我们可能希望子组件能直接修改某些由父组件传递下来的props，而不需要显式地触发一个事件来通知父组件更新这些值。场景：当前，有一个多处使用的弹窗，里面的左半部分是动态变化的，右半部分是统一的，我们需要动态配置左边，所以可以把左边区域的整块内容挖空，在使用到dialog的地方通过插槽去配置。父组件会通过props向下传数据给子组件，当子组件有事情要告诉父组件时，会通过$emit事件告诉父组件。
【前端开发——vue3】学习笔记（3）——pinia环境、自定义事件、组件通信、插槽等
m0_75097013的博客
05-28 945
更多
Vue复习2.0——组件化开发详解
垂死病中惊坐起，菜鸟竟是我自己，于是含泪写下博客
07-17 402
本博客详细介绍和应用了Vue组件化开发的知识，包含父子、兄弟、祖孙组件通信、动态组件、组件插槽、组件作用域及递归组件等，代码已全部上传GitHub可下载体验。Vue复习1.0主要为Vue的基础语法、计算属性、概念、指令。详见Vue复习2.0为组件化开发，此文篇幅较长，请耐心阅读，相信会让你对组件化开发有更深的理解和更好的应用。......
vue模版语法及计算属性和侦听器
Geezer_007的博客
04-22 207
模版语法： 1、插值表达式 2、v-text 3、v-html 4、v-on 5、v-bind 注：指令后面都是j s表达式，表达式后可跟字符串 例：v-text=“name + 'lee' "; 计算属性 1、计算属性（computed）：顾名思义就是通过计算得来的； 特点： 内置缓存、 缓存机制 当计算属性的两个变量未发生改变就不会重新计算，会一直用上次计算的结果；（...
vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
你还有我
04-13 1634
组件结构 组件结构： Vue.component('自定义组件名', { template:'自定义模板', data(){ return { key:value, ... } } }) 组件中的相关属性： 组件类似于vue实例对象，vue实例对象拥有的属性，比如data, methods, computed, filter ，
VUE学习(十一)、组件——非单文件组件、单文件组件
醉瑾_的博客
01-28 1306
VUE学习(十一)、组件——非单文件组件、单文件组件 一、非单文件组件 一个文件包含有n个组件 1、基本使用 <body> <!-- Vue中使用组件的三大步骤： 一、定义组件(创建组件) 二、注册组件 三、使用组件(写组件标签) 一、如何定义一个组件？ 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别； 区别如下： 1.el不要写，
VUE学习笔记——组件篇
Ryx 的博客
06-20 815
文章目录组件基础组件是什么？组件注册全局组件局部组件组件名组件复用自闭合组件组件的data选项单个根元素组件_Prop注册自定义特性Prop的大小写传递静态或动态 Prop传递一个对象的所有属性组件_Prop验证组件_单向数据流组件_非Prop特性替换/合并已有的特性禁用特性继承组件_监听组件事件使用事件抛出一个值事件名将原生事件绑定到组件在组件上使用 v-model.sync 修饰符v-model VS .sync组件_插槽插槽内容编译作用域后备内容具名插槽作用域插槽独占默认插槽的缩写语法解构插槽Prop
在Vue组件上动态添加和删除属性方法
08-27
下面小编就为大家分享一篇在Vue组件上动态添加和删除属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue内置组件component--通过is属性动态渲染组件操作
10-15
主要介绍了vue内置组件component--通过is属性动态渲染组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在Vue中获取组件声明时的name属性方法
10-18
今天小编就为大家分享一篇在Vue中获取组件声明时的name属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue组件中prop属性使用说明实例代码详解
08-27
主要介绍了Vue组件中prop属性使用说明,非常不错具有一定的参考借鉴价值，需要的朋友可以参考下
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 382
在vue.config.js中配置关闭Uncaught runtime errors显示。
关于element-plus中el-select自定义标签及样式的问题
x_XDGS的博客
06-14 258
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
Vue中 .passive 修饰符的作用
Keep trying, keep going
06-09 208
传统的事件监听器在事件触发时，会先执行事件处理函数，然后再决定是否阻止事件的默认行为（如阻止滚动）。这会导致性能问题，因为浏览器需要等待 JavaScript 执行完成后才能继续处理其他任务，如滚动页面。修饰符可以告诉浏览器，事件处理函数不会阻止事件的默认行为，这样浏览器就不需要等待 JavaScript 执行完成，可以立即进行其他任务。这可以提高页面的滚动性能，尤其是在移动端设备上。它的使用场景通常是针对那些需要频繁触发的事件，例如。来阻止事件的默认行为，因为浏览器会忽略这个调用。需要注意的是，当使用。
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）
最新发布
qq_42582773的博客
06-15 152
父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件。
vue 父组件通过ref获取子组件的属性
08-19
在 Vue 中，可以通过 ref 属性来获取子组件的引用，并进一步访问子组件的属性。下面是一个示例： ```vue <ChildComponent ref="childRef"> 获取子组件属性 import ChildComponent from './ChildComponent...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值