vue组件中使用道具传递数据的实例详解 - 行业资讯 - 肥雀云

在Vue中,父子组件的关系可以总结为道具向下传递,事件向上传递。父组件通过道具给子组件下发数据,子组件通过事件给父组件发送消息。看看它们是怎么工作的。

组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信。

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

<强> 1.1字符串数组:

　　　　　　& lt; div id=癮pp4”比; 　　& lt; my-component4消息="数据来自父组件“祝辞& lt;/my-component4> 　　& lt;/div> 　　Vue.component (my-component4, { 　　道具:(“信息”), 　　模板:“& lt; div>{{消息}}& lt;/div>” 　　}）; 　　var app4=new Vue ({ 　　埃尔:“# app4” 　　}); 　　　　

渲染后的结果为:

　　　　　　& lt; div id=癮pp4”比; 　　& lt; div>来自父组件的数据

　　& lt;/div> 　　　　

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

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

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

　　　　　　& lt; div id=癮pp5”比; 　　& lt;输入类型=拔谋尽眝模型=拔谋尽北? 　　& lt; my-component5:文本="文本"祝辞& lt;/my-component5> 　　& lt;/div> 　　Vue.component (my-component5, { 　　道具:[' myText '), 　　模板:“& lt; div> {{myText}} & lt;/div>” 　　}）; 　　var app5=new Vue ({ 　　埃尔:“# app5 ', 　　数据:{ 　　文本:“动态传递父组件数据的　　} 　　}); 　　　　

注意的几个点:

1。如果你要直接传递数字,布尔值,数组,对象,而且不使用v-bind,传递的仅仅是字符串。

2。如果你想把一个对象的所有属性作为自营进行传递,可以使用不带任何参数的v-bind(即用v-bind而不是v-bind: prop-name)。例如,已知一个todo对象:

1.2对象:

当道具需要验证时,就需要对象写法。

一般当你的组件需要提供给别人使用时,推荐都进行数据验证,比如某个数据必须是数字类型,如果传入字符串,就会在控制台弹出警告。

　　　　　　& lt; div id=癮pp6”比; 　　& lt;输入类型=拔谋尽眝模型=笆俊北? 　　& lt; my-component6:文本="数量"祝辞& lt;/my-component6> 　　& lt;/div> 　　Vue.component (my-component6, { 　　道具:{ 　　“myText”: { 　　类型:数字,//必须是数字类型的　　要求:真的,//必须传值　　默认值:1//如果未定义,默认值就是1 　　} 　　}, 　　模板:“& lt; div> {{myText}} & lt;/div>” 　　}）; 　　var app6=new Vue ({ 　　埃尔:“# app6 ', 　　数据:{ 　　数量:1 　　} 　　}); 　　　　

验证的类型类型可以是:

& # 8226;字符串
　　& # 8226;数
　　& # 8226;布尔
　　& # 8226;对象
　　& # 8226;数组
　　& # 8226;函数

类型也可以是一个自定义构造器,使用instanceof检测。

当道具验证失败时,在开发版本下会在控制台抛出一条警告。

Vue 2。x与Vue l。x比较大的一个改变就是,Vue2。x通过道具传递数据是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行。

业务中会经常遇到两种需要改变道具的情况,

2.1一种是父组件传递初始值进来,子组件将它作为初始值保存起来,在自己的作用域下可以随意使用和修改。(作提案为初始值传入后,子组件想把它当作局部数据来用;)