怎么在Vue中使用props方法
本篇文章为大家展示了怎么在Vue中使用props方法，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
创新互联成立于2013年，是专业互联网技术服务公司，拥有项目网站设计、成都网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元川汇做网站,已为上家服务,为川汇各地企业和个人服务,联系电话:028-86922220
Vue props用法详解
组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为：
props down, events up
父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。
父子级组件
比如我们需要创建两个组件 parent 和 child。需要保证每个组件可以在相对隔离的环境中书写，这样也能提高组件的可维护性。
这里我们先定义父子两个组件和一个 Vue 对象：
var childNode = {
template: `
childNode
`
};
var parentNode = {
template: `
`,
components: {
child: childNode
}
};
new Vue({
el: "#example",
components: {
parent: parentNode
}
});
这里的 childNode 定义的 template 是一个 div，并且内容是"childNode"字符串。
而在 parentNode 的 template 中定义了 div 的 class 名叫 parent 并且包含了两个 child 组件。
如果大家想对VUE.JS有更加深入系统的学习，可以参阅 Vue.js实战 PDF高质量扫描版 这本经典读物
静态 props
组件实例的作用域是孤立的。这意味着不能（也不应该）在子组件的模板中直接饮用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项。
父组件向子组件传递数据分为两种方式：动态和静态，这里先介绍静态方式。
子组件要显示的用 props 声明它期望获得的数据
修改上例中的代码，给 childNode 添加一个 props 选项和需要的forChildMsg数据;
然后在父组件中的占位符添加特性的方式来传递数据。
var childNode = {
template: `
{{forChildMsg}}
`,
props: ["for-child-msg"]
};
var parentNode = {
template: `
`,
components: {
child: childNode
}
};命名规范
对于 props 声明的属性，在父组件的 template 模板中，属性名需要使用中划线写法；
子组件 props 属性声明时，使用小驼峰或者中划线写法都可以；而子组件的模板使用从父组件传来的变量时，需要使用对应的小驼峰写法。别担心，Vue 能够正确识别出小驼峰和下划线命名法混用的变量，如这里的forChildMsg和for-child-msg是同一值。
动态 props
在模板中，要动态地绑定父组件的数据到子组件模板的 props，和绑定 Html 标签特性一样，使用v-bind绑定；
基于上述静态 props 的代码，这次只需要改动父组件：
var parentNode = {
template: `
`,
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: "{{forChildMsg}}
",
props: {
"for-child-msg": Number
}
};
let parentNode = {
template: `
`,
components: {
child: childNode
},
data() {
return {
// 当这里是字符串 "123456"时会报错
msg: 123456
};
}
};
还可以在 props 定义的数据中加入自定义验证函数，当函数返回 false 时，输出警告。
比如我们把上述例子中的 childNode 的for-child-msg修改成一个对象，并包含一个名叫validator的函数，该命名是规定叫validator的，自定义函数名不会生效。
let childNode = {
template: "{{forChildMsg}}
",
props: {
"for-child-msg": {
validator: function(value) {
return value > 100;
}
}
}
};在这里我们给for-child-msg变量设置了validator函数，并且要求传入的值必须大于 100，否则报出警告。
单向数据流
props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件五一修改父组件的状态。
所以不应该在子组件中修改 props 中的值，Vue 会报出警告。
let childNode = {
template: `
子组件数据
{{forChildMsg}}
`,
props: {
"for-child-msg": String
}
};
let parentNode = {
template: `
