VUE-props(父子组件之间的传值)

静态props

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

使用Prop传递数据包括静态和动态两种形式，下面先介绍静态props

子组件要显式地用 props 选项声明它期待获得的数据

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

静态Prop通过为子组件在父组件中的占位符添加特性的方式来达到传值的目的

<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声明的属性来说，在父级HTML模板中，属性名需要使用中划线写法

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

子级props属性声明时，使用小驼峰或者中划线写法都可以；而子级模板使用从父级传来的变量时，需要使用对应的小驼峰写法

var childNode = {
  template: '<div>{{myMessage}}</div>',
  props:['myMessage']
}




var childNode = {
  template: '<div>{{myMessage}}</div>',
  props:['my-message']
}

动态props

在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件 动态的传值 就是加一个v-bind 或者是在前面加一个 --> ***😗**<-- 这个

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'
    }
  }
};

传递数字

初学者常犯的一个错误是使用字面量语法传递数值

<!-- 传递了一个字符串 "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>

　因为它是一个字面 prop，它的值是字符串 “1” 而不是 number。如果想传递一个实际的 number，需要使用 v-bind，从而让它的值被当作JS表达式计算

<!-- 传递实际的 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，在data属性中设置对应的数字1

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

props验证

可以为组件的 props 指定验证规格。如果传入的数据不符合规格，Vue会发出警告。当组件给其他人使用时，这很有用

要指定验证规格，需要用对象的形式，而不能用字符串数组

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
      }
    }
  }
})

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

当 prop 验证失败，Vue 会在抛出警告 (如果使用的是开发版本)。props会在组件实例创建之前进行校验，所以在 default 或 validator 函数里，诸如 data、computed 或 methods 等实例属性还无法使用

下面是一个简单例子，如果传入子组件的message不是数字，则抛出警告

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

传入数字123时，则无警告提示。传入字符串’123’时，结果如下所示

　将上面代码中，子组件的内容修改如下，可自定义验证函数，当函数返回为false时，则输出警告提示

var childNode = {
  template: '<div>{{message}}</div>',
  props:{
    'message':{
      validator: function (value) {
        return value > 10
      }
    }
  }
}

在父组件中传入msg值为1，由于小于10，则输出警告提示

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

转载自 里面有更加详细的内容博客园