怎么在Vue.js中使用道具传递数据 - 行业资讯 - 肥雀云

　　介绍

本篇文章给大家分享的是有关怎么在Vue。js中使用道具传递数据,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

<>强基本用法

通常父组件的模板中包含子组件,父组件要正向地向子组件传递数据或参数,子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过道具来实现的。

在组件中,使用选项道具来声明需要从父级接收的数据,道具的值可以是两种,一种是字符串数组,一种是对象。

示例:构造一个数组,接收一个来自父组件的消息,并把它再组件模板中渲染

　　<组件信息="来自父组件的数据"> 　　

　　<脚本> 　　Vue.component(“组件”,{ 　　道具:(“信息”), 　　模板:“

' 　　}); 　　　　var myApp=new Vue ({ 　　埃尔:“# myApp” 　　});> 　　

道具中声明的数据与组件函数返回的数据主要区别是:* *道具的数据来自父级,而数据中的数据是组件自己的数据,作用域是组件本身。* *这两种数据都可以在模板模板及计算属性和计算方法方法中使用。

上例的数据消息就是通过道具从父级传递过来的,在组件的字的那个一标签上直接写该道具的名称,如果要传递多个数据,在道具数组中添加项即可。

注意:由于html特性不区分大小写,当使用DOM模板时,驼峰命名的道具名称要转为短横分割命名,例如:

& lt; div id=癮pp"比; 　　,,,& lt; my-component warning-text=疤崾拘畔ⅰ白４? lt;/my-component> 　　& lt;/div> 　　& lt; script>//如果使用字符串模板,可以忽略这些限制　　Vue.component才能(& # 39;my-component& # 39;, { 　　,,,道具:,(& # 39;warningText& # 39;), 　　,,,模板:,& # 39;& lt; div> {{warningText}} & lt;/div> & # 39; 　　,,}); 　　　　var 才能;app =, Vue ({new 　　el:,,,, & # 39; #应用# 39; 　　,,}); 　　& lt;/script>

有时候,传递的数据并不是直接写死的,而是来自父级的动态数据,这时候可以使用指令v-bing来动态绑定道具的值,当父组件的数据变化时,也会传递给子组件。

& lt; ! DOCTYPE html> 　　& lt; html lang=癳n"祝辞　　& lt; head> 　　& lt;才能meta charset=癠TF-8"比; 　　& lt;才能meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比; 　　& lt;才能meta http-equiv=癤-UA-Compatible",内容=癷e=edge"比; 　　& lt;才能script src=癶ttps://unpkg.com/vue/dist/vue.js"祝辞& lt;/script> 　　& lt;才能title>动态绑定& lt;/title> 　　& lt;/head> 　　& lt; body> 　　& lt;才能div id=癮pp"比; 　　,,,& lt; input 类型=皌ext", v模型=皃arentMessage"比; 　　,,,& lt; my-component :消息=皃arentMessage"祝辞& lt;/my-component> 　　& lt;才能/div> 　　& lt;才能script> 　　,,,Vue.component (& # 39; my-component& # 39;, { 　　,,,,,道具:,(& # 39;消息# 39;), 　　,,,,,模板:,& # 39;& lt; div>{{消息}}& lt;/div> & # 39; 　　,,,}); 　　　　,,,var app =, Vue ({new 　　,,,,,el:, & # 39; #应用# 39; 　　,,,,,数据:,{ 　　,,,,,,,parentMessage:, & # 39; & # 39; 　　,,,,,} 　　,,,}); 　　& lt;才能/script> 　　& lt;/body> 　　& lt;/html>

怎么在Vue。js中使用道具传递数据

以上就是怎么在Vue.js中使用道具传递数据,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。