怎么在Vue中使用props方法-创新互联

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: `
  

   
parentNode
   
   
  
  `,
 components: {
 child: childNode
 }
};

命名规范

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

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

动态 props

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

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

var parentNode = {
 template: `
  

   
parentNode
   
   
  
  `,
 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: `