Vue props用法详解

前边的话

零件接受的选料之壹 props 是 Vue
中相当关键的七个选项。父亲和儿子组件的涉及得以总括为:

  组件接受的选项超过二分一与Vue实例同样,而挑选props是组件中卓殊重大的三个选项。在
Vue 中,老爹和儿子组件的涉及能够总计为 props down, events up。父组件通过 props
向下传递数据给子组件,子组件通过 events
给父组件发送音讯。本文将详细介绍Vue组件选项props

props down, events up

永利开户送38元体验金 1

父组件通过 props 向下传递数据给子组件;子组件通过 events
给父组件发送音信。

静态props

老爹和儿子级组件

  组件实例的功效域是孤立的。那象征不能够 (也不应有)
在子组件的模版内一贯引用父组件的多少。要让子组件使用父组件的多寡,须要通过子组件的
props 选项

例如大家须求创设多少个零件 parent 和
child。供给确定保证每一个组件能够在相持隔开的意况中书写,这样也能增加组件的可维护性。

  使用Prop传递数据包涵静态和动态三种样式,上面先介绍静态props

此间大家先定义父亲和儿子五个零件和二个 Vue 对象:

  子组件要显式地用 props 选项申明它仰望获得的数码

var childNode = {
 template: `
    <div>childNode</div>
    `
};
var parentNode = {
 template: `
    <div>
     <child></child>
     <child></child>
    </div>
    `,
 components: {
  child: childNode
 }
};
new Vue({
 el: "#example",
 components: {
  parent: parentNode
 }
});


<div id="example">
 <parent></parent>
</div>
var childNode = {
 template: '<div>{{message}}</div>',
 props:['message']
}

这里的 childNode 定义的 template 是三个div,并且内容是”childNode”字符串。

  静态Prop通过为子组件在父组件中的占位符增加性格的不2诀窍来达成传值的目标

而在 parentNode 的 template 中定义了 div 的 class 名称为 parent
并且带有了七个 child 组件。

<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: '<div>{{message}}</div>',
 props:['message']
}
var parentNode = {
 template: `
 <div class="parent">
 <child message="aaa"></child>
 <child message="bbb"></child>
 </div>`,
 components: {
 'child': childNode
 }
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

静态 props

永利开户送38元体验金 2

组件实例的功用域是孤立的。这意味着无法(也不应有)在子组件的模板中一贯饮用父组件的多寡。要让子组件使用父组件的数据,必要通过子组件的
props 选项。

取名约定

父组件向子组件传递数据分为二种办法:动态和静态,这里先介绍静态格局。

  对于props表明的性质来讲,在父级HTML模板中,属性名需求采取中写道写法

子组件要出示的用 props 注脚它希望获得的数据

var parentNode = {
 template: `
 <div class="parent">
 <child my-message="aaa"></child>
 <child my-message="bbb"></child>
 </div>`,
 components: {
 'child': childNode
 }
};

修改上例中的代码,给 childNode 增添多个 props
选项和须要的forChildMsg数据;

  子级props属性证明时,使用小驼峰大概中写道写法都得以;而子级模板使用从父级传来的变量时,须要选用相应的小驼峰写法

然后在父组件中的占位符加多天性的办法来传递数据。

var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['myMessage']
}
var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['my-message']
}
var childNode = {
 template: `
    <div>
     {{forChildMsg}}
    </div>
    `,
 props: ["for-child-msg"]
};
var parentNode = {
 template: `
    <div>
     <p>parentNode</p>
     <child for-child-msg="aaa"></child>
     <child for-child-msg="bbb"></child>
    </div>
    `,
 components: {
  child: childNode
 }
};

动态props

命名标准

  在模板中,要动态地绑定父组件的数额到子模板的
props,与绑定到别的一般的HTML性子相左近,就是用
v-bind。每当父组件的多寡变化时,该变化也会传导给子组件

对此 props 注脚的品质,在父组件的 template
模板中,属性名急需利用中写道写法;

var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['myMessage']
}
var parentNode = {
 template: `
 <div class="parent">
 <child :my-message="data1"></child>
 <child :my-message="data2"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return {
 'data1':'aaa',
 'data2':'bbb'
 }
 }
};

子组件 props
属性注明时,使用小驼峰或然中写道写法都可以;而子组件的沙盘使用从父组件传来的变量时,需求选用相应的小驼峰写法。别忧郁,Vue
能够科学识别出小驼峰和下划线命名法混用的变量,如这里的forChildMsgfor-child-msg是同1值。

传递数字

动态 props

  初学者常犯的四个荒谬是运用字面量语法传递数值

在模板中,要动态地绑定父组件的数目到子组件模板的 props,和绑定 Html
标签天性同样,使用v-bind绑定;

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>
<div id="example">
 <my-parent></my-parent>
</div>
<script>
var childNode = {
 template: '<div>{{myMessage}}的类型是{{type}}</div>',
 props:['myMessage'],
 computed:{
 type(){
 return typeof this.myMessage
 }
 }
}
var parentNode = {
 template: `
 <div class="parent">
 <my-child my-message="1"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 }
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'MyParent': parentNode
 }
})
</script>

基于上述静态 props 的代码,这一次只必要更改父组件:

永利开户送38元体验金 3

var parentNode = {
 template: `
    <div>
     <p>parentNode</p>
     <child :for-child-msg="childMsg1"></child>
     <child :for-child-msg="childMsg2"></child>
    </div>
    `,
 components: {
  child: childNode
 },
 data: function() {
  return {
   childMsg1: "Dynamic props msg for child-1",
   childMsg2: "Dynamic props msg for child-2"
  };
 }
};

  因为它是三个字面 prop,它的值是字符串 “一” 而不是
number。借使想传递1个其实的 number,供给利用
v-bind,从而让它的值被作为JS表明式总结

在父组件的 data 的 return 数据中的 childMsg壹 和 childMsg二会被传入子组件中,

<!-- 传递实际的 number -->
<comp v-bind:some-prop="1"></comp>
var parentNode = {
 template: `
 <div class="parent">
 <my-child :my-message="1"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 }
};

props 验证

永利开户送38元体验金 4

表明传入的 props 参数的数据标准,若是不合乎数据规范,Vue 会发出警告。

  也许能够行使动态props,在data属性中设置相应的数字一

能确定的富有品类(约等于 type 值)有:String, Number, Boolean, Function,
Object, Array, Symbol

var parentNode = {
 template: `
 <div class="parent">
 <my-child :my-message="data"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 },
 data(){
 return {
 'data': 1
 }
 }
};
Vue.component("example", {
 props: {
  // 基础类型检测, null意味着任何类型都行
  propA: Number,
  // 多种类型
  propB: [String, Number],
  // 必传且是String
  propC: {
   type: String,
   required: true
  },
  // 数字有默认值
  propD: {
   type: Number,
   default: 101
  },
  // 数组、默认值是一个工厂函数返回对象
  propE: {
   type: Object,
   default: function() {
    console.log("propE default invoked.");
    return { message: "I am from propE." };
   }
  },
  // 自定义验证函数
  propF: {
   isValid: function(value) {
    return value > 100;
   }
  }
 }
});
let childNode = {
 template: "<div>{{forChildMsg}}</div>",
 props: {
  "for-child-msg": Number
 }
};
let parentNode = {
 template: `
     <div class="parent">
      <child :for-child-msg="msg"></child>
     </div>
    `,
 components: {
  child: childNode
 },
 data() {
  return {
   // 当这里是字符串 "123456"时会报错
   msg: 123456
  };
 }
};

props验证

还足以在 props 定义的多少中进入自定义表明函数,当函数再次来到 false
时,输出警告。

  可感到组件的 props
钦点验证规格。假若传入的数额不切合标准,Vue会发出警告。当组件给其别人使用时,这很有用

举个例子大家把上述例子中的 childNode
的for-child-msg修改成三个对象,并包蕴3个叫作validator的函数,该命名是明确叫validator的,自定义函数名不会生效。

  要钦点验证规格,必要用对象的款式,而不可能用字符串数组

let childNode = {
 template: "<div>{{forChildMsg}}</div>",
 props: {
  "for-child-msg": {
   validator: function(value) {
    return value > 100;
   }
  }
 }
};
Vue.component('example', {
 props: {
 // 基础类型检测 (`null` 意思是任何类型都可以)
 propA: Number,
 // 多种类型
 propB: [String, Number],
 // 必传且是字符串
 propC: {
 type: String,
 required: true
 },
 // 数字,有默认值
 propD: {
 type: Number,
 default: 100
 },
 // 数组/对象的默认值应当由一个工厂函数返回
 propE: {
 type: Object,
 default: function () {
 return { message: 'hello' }
 }
 },
 // 自定义验证函数
 propF: {
 validator: function (value) {
 return value > 10
 }
 }
 }
})

在这边我们给for-child-msg变量设置了validator函数,并且须求传入的值必须超越拾0,否则报出警告。

  type 能够是底下原生构造器

单向数据流

String
Number
Boolean
Function
Object
Array
Symbol

props
是单向绑定的:当父组件的习性别变化化时,将传输给子组件,可是不会反过来。那是为了防止子组件5一修改父组件的情况。

  type 也可以是一个自定义构造器函数,使用 instanceof 检查测试。

从而不应当在子组件中期维修改 props 中的值,Vue 会报出警告。

  当 prop 验证退步,Vue 会在抛出警告
(倘若使用的是支付版本)。props会在组件实例成立在此之前开始展览校验,所以在
default 或 validator 函数里,诸如 data、computed 或 methods
等实例属性还不也许利用

let childNode = {
 template: `
     <div class="child">
      <div>
       子组件数据
       <input v-model="forChildMsg"/>
      </div>
      <p>{{forChildMsg}}</p>
     </div>`,
 props: {
  "for-child-msg": String
 }
};
let parentNode = {
 template: `
     <div class="parent">
      <div>
       父组件数据
       <input v-model="msg"/>
      </div>
      <p>{{msg}}</p>
      <child :for-child-msg="msg"></child>
     </div>
    `,
 components: {
  child: childNode
 },
 data() {
  return {
   msg: "default string."
  };
 }
};

  上面是3个回顾例子,倘使传入子组件的message不是数字,则抛出警示

此地大家给父组件和子组件都有三个输入框,并且出示出父组件数据和子组件的数量。当大家在父组件的输入框输入新数据时,同步的子组件数量也被改换了;那就是props
的向子组件传递数据。而当大家修改子组件的输入框时,浏览器的调整台则报出错误警告

<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: '<div>{{message}}</div>',
 props:{
 'message':Number
 }
}
var parentNode = {
 template: `
 <div class="parent">
 <child :message="msg"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return{
 msg: '123'
 }
 }
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

[Vue warn]: Avoid mutating a prop directly since the value will be
overwritten whenever the parent component re-renders. Instead, use a
data or computed property based on the prop’s value. Prop being
mutated: “forChildMsg”

  传入数字1贰三时,则无警告提醒。传入字符串’1二三’时,结果如下所示

修改 props 数据

永利开户送38元体验金 5

一般性有两种原因:

  将上边代码中,子组件的剧情更改如下,可自定义表达函数,当函数重返为false时,则输出警告提醒

  1. prop 作为初步值传入后,子组件想把它看成局地数据来用
  2. prop 作为发轫值传入后,由子组件管理成别的数据输出
var childNode = {
 template: '<div>{{message}}</div>',
 props:{
 'message':{
 validator: function (value) {
 return value > 10
 }
 }
 }
}

应对章程是

  在父组件中盛传msg值为1,由于小于拾,则输出警告提醒

概念五个片段变量,并用 prop 的值初步化它

var parentNode = {
 template: `
 <div class="parent">
 <child :message="msg"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return{
 msg:1
 }
 }
};

唯独由于定义的 ownChildMsg 只能接受 forChildMsg
的初步值,当父组件要传送的值变化产生时,ownChildMsg 无法接收更新。

永利开户送38元体验金 6

let childNode = {
 template: `
     <div class="child">
      <div>
       子组件数据
       <input v-model="forChildMsg"/>
      </div>
      <p>{{forChildMsg}}</p>
      <p>ownChildMsg : {{ownChildMsg}}</p>
     </div>`,
 props: {
  "for-child-msg": String
 },
 data() {
  return { ownChildMsg: this.forChildMsg };
 }
};

单向数据流

这里大家加了3个<p>用于查看 ownChildMsg
数据是还是不是变动,结果开掘只有暗中同意值传递给了
ownChildMsg,父组件改造只会转移到 forChildMsg,不会修改 ownChildMsg。

  prop
是单向绑定的:当父组件的属性别变化化时,将传输给子组件,可是不会反过来。那是为了制止子组件无意修改了父组件的场合——那会让使用的数据流难以领会

概念1个计量属性,管理 prop 的值并再次来到

  其余,每一趟父组件更新时,子组件的持有 prop
都会更新为新型值。那意味着不应当在子组件内部退换 prop。倘若那样做了,Vue
会在调控台给出警告

是因为是测算属性,所以只能展现值,不能设置值。大家这里安装的是即便从父组件修改了
forChildMsg 数据,大家就把 forChildMsg
加上三个字符串”—ownChildMsg”,然后展现在显示屏上。那时是足以每当父组件修改了新数据,都会更新
ownChildMsg 数据的。

  下边是3个标准例证

let childNode = {
 template: `
     <div class="child">
      <div>
       子组件数据
       <input v-model="forChildMsg"/>
      </div>
      <p>{{forChildMsg}}</p>
      <p>ownChildMsg : {{ownChildMsg}}</p>
     </div>`,
 props: {
  "for-child-msg": String
 },
 computed: {
  ownChildMsg() {
   return this.forChildMsg + "---ownChildMsg";
  }
 }
};
<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: `
 <div class="child">
 <div>
 子组件数据
 <input v-model="childMsg">
 </div>
 <p>{{childMsg}}</p>
 </div>
 `,
 props:['childMsg']
}
var parentNode = {
 template: `
 <div class="parent">
 <div>
 父组件数据
 <input v-model="msg">
 </div>
 <p>{{msg}}</p>
 <child :child-msg="msg"></child>
 </div>
 `,
 components: {
 'child': childNode
 },
 data(){
 return {
 'msg':'match'
 }
 }
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

非常合适的主意是应用变量存款和储蓄 prop 的开首值,并用 watch 来观望 prop
值得变化。产生变化时,更新变量的值。

  父组件数据变动时,子组件数据会相应改造;而子组件数据变动时,父组件数量不改变,并在调控台呈现警告

let childNode = {
 template: `
     <div class="child">
      <div>
       子组件数据
       <input v-model="forChildMsg"/>
      </div>
      <p>{{forChildMsg}}</p>
      <p>ownChildMsg : {{ownChildMsg}}</p>
     </div>`,
 props: {
  "for-child-msg": String
 },
 data() {
  return {
   ownChildMsg: this.forChildMsg
  };
 },
 watch: {
  forChildMsg() {
   this.ownChildMsg = this.forChildMsg;
  }
 }
};

永利开户送38元体验金 7

以上便是本文的全体内容,希望对我们的就学抱有补助,也期望大家多多帮忙脚本之家。

  修改prop中的数据,常常有以下三种原因

你只怕感兴趣的稿子:

  • Vue中props的利用详解
  • vue之父子组件间通讯实例讲授(props、$ref、$emit)
  • vue组件中选用props传递数据的实例详解
  • vue二.0
    子组件改造props值,并向父组件传值的格局
  • 浅谈vue的props,data,computed变化对组件更新的影响
  • vue父组件向子组件(props)传递数据的秘技
  • Vue2.0
    slot分发内容与props验证的措施
  • 详解vue.js之props传递参数
  • VueJS组件之间通过props交互及评释的方法
  • 永利开户送38元体验金,vue中component组件的props使用详解

  一、prop 作为初叶值传入后,子组件想把它看做局地数据来用

  2、prop 作为初步值传入,由子组件管理成任何数据输出

  对于那三种状态,精确的答应办法是

  一、定义一个有个别变量,并用 prop 的值伊始化它

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

  二、定义二个测算属性,管理 prop 的值并重返

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

  [注意]JS中指标和数组是援引类型,指向同三个内部存款和储蓄器空间,倘若 prop
是一个对象或数组,在子组件内部退换它会潜移默化父组件的境况

总结

以上所述是小编给我们介绍的Vue组件选项props实例详解,希望对大家有着帮忙,假若大家有别的疑问请给自己留言,我会及时还原大家的。在此也特别感激我们对台本之家网址的帮忙!

您大概感兴趣的稿子:

  • Vuejs
    组件——props数据传递的实例代码
  • Vuejs第10篇之组件功用域及props数据传递实例详解
  • vue组件中使用props传递数据的实例详解
  • Vue二.0选拔 v-model
    实现组件props双向绑定的美丽化解方案
  • vue里面v-bind和Props
    利用props绑定动态数据的主意

相关文章