道具如何在Vuejs中使用

　　介绍

这期内容当中小编将会给大家带来有关道具如何在Vuejs中使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

<强>一、使用道具传递数据

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用道具把数据传给子组件。

道具是父组件用来传递数据的一个自定义属性。子组件需要显示的地用道具选项声明“道具”

Vue.component(& # 39;孩子# 39;,{ 　　道具才能:[& # 39;消息# 39;], 　　模板:才能& # 39;& lt; span> {{, message }} & lt;/span> & # 39; 　　})

然后向它传入一个普通字符串:

& lt; child 消息=澳愫?“祝辞& lt;/child>

结果:

你好!

<强>二,camelCase vs.kebab-case

html不区分大小写。当使用非字符串模板时,道具的名字形式会从camelCase转为kebab-case(短横线隔开):

//camelCase 　　Vue.component(& # 39;孩子# 39;,{ 　　道具才能:[& # 39;myMessage& # 39;], 　　模板:才能& # 39;& lt; span> {{, message }} & lt;/span> & # 39; 　　}) //kebab-case 　　& lt; child 我的信息=澳愫?“祝辞& lt;/child>

再次说明,如果你是用字符串模板,不用在意这些限制。

<强>三、动态支撑

类似于用v-bind绑定HTML特性到一个表达式,也可以用v-bind动态绑定道具的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件。

& lt; div> 　　& lt;才能input  v模型=皃arrentMsg"比; 　　& lt;才能br> 　　& lt;才能child  v-bind:我的信息=皃arrentMsg"祝辞& lt;/child> 　　& lt;/div>

使用v-bind的缩写语法通常更简单:

& lt; child :我的信息=皃arrentMsg"祝辞& lt;/child>

<强>四,字面量语法和动态语法

因为它是一个字面支撑,它的值以字符串“1”;而不是以实际的数字传下去。如果想传递一个实际的JavaScript数字,需要使用v-bind,从而让它的值被当作JavaScript表达式计算:

<强>五、单项数据流

道具是单项绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态,这会让应用的数据流难以理解,同时,这也很好理解,父组件是子组件的高度抽象,表示子组件的共有部分,一个组件的数据改变并不会改变其抽象,然而其抽象的改变却代表着所有子组件的改变。

另外,每次组渐渐更新时,子组件的所有道具都会更新为最新值。这意味着你不应该在子组件内部改变道具。如果你这么做了,Vue会在控制台给出警告。

通常有两种改变道具的情况:

1.支撑作为初始值传入,子组件之后只是将它的初始值作为本地数据的初始值使用;

2。道具作为需要被转变的原始值传入。

更确切地说这两种情况是:
。定义一个局部数据属性,并将支柱的初始值作为局部数据的初始值。

", 　　道具:[' initialCounter& # 39;,, 　　数据:,function  (), {, 　　return {,计数器:this.initialCounter}, 　　}

b。定义一个计算属性,此属性从道具的值计算得出。

,, ' ' ' 　　,,道具:[& # 39;大小# 39;], 　　计算才能:{ 　　,,,normalizedSize:, function  (), { 　　,,,,return  this.size.trim () .toLowerCase () 　　,,} 　　以前,,}

<强>六、道具验证

组件可以为道具指定验证要求。如果未指定验证要求,Vue会发出警告。当组件给其他人使用时这很有用。
道具是一个对象而不是字符串数组时,它包含验证要求:

Vue.component(& # 39;示例# 39;,,{ 　　,道具:{//才能,基础类型检测,(‘零’,意思是任何类型都可以) 　　,,propA:数字,//,才能多种类型 　　,,propB:字符串,,,//才能,必传且是字符串 　　,,propC: { 　　,,,类型:字符串, 　　,,要求:真实 　　,,},//,才能数字,有默认值 　　,,propD: { 　　,,,类型:数字, 　　,,默认值:100 　　,,},//,才能数组/对象的默认值应当由一个工厂函数返回 　　,,propE: { 　　,,,类型:对象, 　　,,,默认值:function  (), { 　　,,,return {,信息:& # 39;你好,,} 　　,,} 　　,,},//才能,自定义验证函数 　　,,propF: { 　　,,,验证器:function (值),{ 　　,,,return  value 在10 　　,,} 　　,,} 　　,} 　　})

道具如何在Vuejs中使用