Vue组件传值的几种常用方式

大家好。本系列，我们来讲解一下Vue组件中几种常用的传值方式和逻辑环节。最常见的Vue组件传值分为三种，第一种是parenttochildvaluetransfer，第二种是childtoparentvaluetransfer，第三种是siblingcomponents之间的valuetransfer，我们先从第一种情况分析和写的。第一种方法：父子传值。父子传值就是将父组件中的值传递给子组件。方法是在子组件内部自定义一个props属性，通过props属性完成父子组件之间的通信。数据传输。新建文件导入结构首先，我们在components文件夹下新建两个文件，分别是Father.vue和Son.vue，在这两个文件中使用shift+“<”键快速生成结构，如图图：导入注册使用在子组件的第二步，我们将Son作为子组件引入到父组件中，完成注册并在模板template中使用Son的实例：。box2{//父组件自己的内部标签h1{color:orange;}}操作main.js文件，我们需要在main.js文件中导入父组件，命名为Father，在渲染区设置父组件输入文件名，如图图中：运行文件在终端使用命令“npmrunserve”编译文件，打开第一个网站查看效果：效果：至此，我们完成了整个传值过程从父组件到子组件。思路总结到这里，我们大致理清具体的实现步骤：第一步，将子组件导入到父组件中，在父组件内部完成注册和使用；第二步：在子组件props中设置自定义属性，并在其中添加几个字符串作为父组件中的属性名；第三步：在子组件中使用template模板中的插值表达式来直观的展示我们调试的结果；第四步：在父组件中操作数据区，返回一个对象，提供渲染依赖的数据源；第五步，在父组件中使用template模板中的插值表达式，查看父组件自身是否可以接收到data中的值，为子组件的实例绑定动态属性；最后在main.js中导入父组件，在渲染区输入父组件的名称，在终端使用命令“npmrunserve”编译文件。打开网站看看效果。链接：https://juejin.cn/post/7142064563763019812来源：稀土掘金版权归作者所有。商业转载请联系作者授权，非商业转载请注明出处。