当前位置: 首页> 娱乐> 明星 > vue脚手架 笔记02

vue脚手架 笔记02

时间:2025/7/11 8:38:33来源:https://blog.csdn.net/m0_47045804/article/details/139501053 浏览次数:0次

目录

01 父组件给子组件传参

02 子组件给父组件传递参数

03  父组件与子组件之间实现双向数据绑定

04 父组件与子组件之间相互获取对象

05 ref属性


 

01 父组件给子组件传参

        父组件给子组件传参

                1 在父组件模板中找到子组件标签

                2. 通过v-bind 绑定一个自定义属性名 值为传递的变量

                3.在子组件的js的大括号里面 通过props注册传递过来的属性名

                4.这个属性名就可以当做一个变量直接使用 或者js里面通过this.获取

        父组件给子组件传参是单项数据绑定(单项数据流):

                父组件页面加载时就传递过去

                一旦在父组件中这个变量数据更改 子组件也同步更改

                但是子组件无法直接修改父组件传递过去的数据

        props接收数据的两种方式:

                1. props:['变量1','变量2',...] 可以传递多个数据

                2.props:{

                        父组件传过来的变量1:{

                                type:这个数据对应的构造函数名(大写的类型名)

                                default:如果父组件没有传递这个变量 那么默认值生效

                        }

                }

02 子组件给父组件传递参数

        子组件给父组件传递参数:

                传参原理: 发布事件的方式进行传参

        传参的步骤:

                1.在子组件的任意事件里面通过this.$emit方法

                2.this.$emit('自定义事件名称',传递过去的数据可以是多个数据)

                3.在父组件模板中找到子组件标签 通过@绑定自定义事件名称

                4.值为父组件methods里面的一个函数名

                5.这个驱动函数的形参接收传递过来的数据

                6.如果想要这个数据在父组件的其他地方使用 可以通过data定义一个变量作为中转

03  父组件与子组件之间实现双向数据绑定

        父组件与子组件之间实现双向数据绑定 是通过.sync(同步)事件修饰符实现的

        实现步骤:

                1.在父组件模板中的子组件标签上面

                2.通过v-bind绑定自定义属性名.sync='要传递过去的变量'

                3.子组件通过props注册传递过来的变量

                4.子组件要修改这个变量 要通过 this.$emit方法

               5.this.#emit('update:父组件传过来的变量名(也就是props里面注册的变量名)',修改的新值)

04 父组件与子组件之间相互获取对象

        父组件与子组件之间直接获取对方的对象(面试题)

        父组件可以直接获取子组件对象

                并且可以直接操作子组件的data里面的数据或者methods里面的方法

        父组件直接获取子组件对象:

                this.$children[索引值]

                索引是按照父组件模板中子组件的加载顺序计算的

                拿到子组件对象 就可以直接操作子组件的数和事件

        子组件直接获取父组件对象

                在子组件中通过this.$parent 直接能够获取当前子组件所在的父组件对象

                也就是可以直接操作当前父组件的数和事件

        以上两种方式用的很少  

        原因是不好维护 直接操作的都不在自己的组件里面  所以用的很少

05 ref属性

        ref属性的作用:

              1.如果ref属性定义在组件标签上面 那么能够是父组件直接获取子组件对象

                不像$children返回的是一个数组 需要通过索引值获取指定子组件对象

                ref是能够精准的获取子组件对象

                在父组件中 通过this.$refs.ref属性的值 直接获取子组件对象

              2. 如果ref属性定义在原生html标签上面:

                  那么能够获取当前标签的原生DOM对象 

关键字:vue脚手架 笔记02

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: