Vue props用法详解(小结)

Vue props用法详解

组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为：

props down, events up

父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。

父子级组件

比如我们需要创建两个组件 parent 和 child。需要保证每个组件可以在相对隔离的环境中书写，这样也能提高组件的可维护性。

这里我们先定义父子两个组件和一个 Vue 对象：

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

 <div id="example"> </div>

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

而在 parentNode 的 template 中定义了 div 的 class 名叫 parent 并且包含了两个 child 组件。

如果大家想对VUE.JS有更加深入系统的学习，可以参阅 Vue.js实战 PDF高质量扫描版 这本经典读物

静态 props

组件实例的作用域是孤立的。这意味着不能（也不应该）在子组件的模板中直接饮用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项。

父组件向子组件传递数据分为两种方式：动态和静态，这里先介绍静态方式。

子组件要显示的用 props 声明它期望获得的数据

修改上例中的代码，给 childNode 添加一个 props 选项和需要的forChildMsg数据;

然后在父组件中的占位符添加特性的方式来传递数据。

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

命名规范

对于 props 声明的属性，在父组件的 template 模板中，属性名需要使用中划线写法；

子组件 props 属性声明时，使用小驼峰或者中划线写法都可以；而子组件的模板使用从父组件传来的变量时，需要使用对应的小驼峰写法。别担心，Vue 能够正确识别出小驼峰和下划线命名法混用的变量，如这里的forChildMsg和for-child-msg是同一值。

动态 props

在模板中，要动态地绑定父组件的数据到子组件模板的 props，和绑定 Html 标签特性一样，使用v-bind绑定；

基于上述静态 props 的代码，这次只需要改动父组件：

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

在父组件的 data 的 return 数据中的 childMsg1 和 childMsg2 会被传入子组件中，

props 验证

验证传入的 props 参数的数据规格，如果不符合数据规格，Vue 会发出警告。

能判断的所有种类（也就是 type 值）有：String, Number, Boolean, Function, Object, Array, Symbol

 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"> </div> `, components: { child: childNode }, data() { return { // 当这里是字符串 "123456"时会报错 msg: 123456 }; } }; 

还可以在 props 定义的数据中加入自定义验证函数，当函数返回 false 时，输出警告。

比如我们把上述例子中的 childNode 的for-child-msg修改成一个对象，并包含一个名叫validat来1源gaodai#ma#com搞*代#码1网or的函数，该命名是规定叫validator的，自定义函数名不会生效。

 let childNode = { template: "<div>{{forChildMsg}}</div>", props: { "for-child-msg": { validator: function(value) { return value > 100; } } } }; 

在这里我们给for-child-msg变量设置了validator函数，并且要求传入的值必须大于 100，否则报出警告。

单向数据流

props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件五一修改父组件的状态。

所以不应该在子组件中修改 props 中的值，Vue 会报出警告。

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

这里我们给父组件和子组件都有一个输入框，并且显示出父组件数据和子组件的数据。当我们在父组件的输入框输入新数据时，同步的子组件数据也被修改了；这就是 props 的向子组件传递数据。而当我们修改子组件的输入框时，浏览器的控制台则报出错误警告

[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

以上就是Vue props用法详解(小结)的详细内容，更多请关注gaodaima搞代码网其它相关文章！

---

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue props用法详解(小结)

喜欢 (0)赏

[搞代码]

分享 (0)