<test-prop-validate :prop-a="1" :prop-b="2" :prop-c="'3'" :prop-f="'success'"></test-prop-validate>
Vue.component('test-prop-validate', {
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 ['success', 'warning', 'danger'].indexOf(value) !== -1
data() {
  return {
template: `
      {{propD}}{{propE}}
1234567891011121314151617181920212223242526272829303132333435363738394041424344
type 可以是下列原生构造函数中的一个：
 
String Number Boolean Array Object Date Function Symbol
 
非 prop 特性
 
非 prop 特性，组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上
 
<style>
.colorRed {
color: red;
.defineSize {
font-size: 20px;
</style>
<!-- 非prop属性 -->
<test-not-prop class="colorRed" my-self-define></test-not-prop>
Vue.component('test-not-prop', {
data() {
  return {
template: `<div style="font-weight:bold;" class="defineSize">Test Not Prop</div>`
<!-- 渲染为 -->
<div class="defineSize colorRed" my-self-define="" style="font-weight: bold;">Test Not Prop</div>
123456789101112131415161718192021
非Prop属性渲染
 对于绝大多数特性来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type=“text” 就会替换掉 type=“date” 并把它破坏！庆幸的是，class 和 style 特性会稍微智能一些，即两边的值会被合并起来，从而得到最终的值：defineSize colorRed。
 
prop 数据单项传递，父影响子，子不影响父
不能在组件中直接修改 prop 传递过来的值，Vue 会给出警告
prop 验证时，会在实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的
非 prop 特性，组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上。
                    Prop1 . prop 大小写Vue.component('blog-post', {// 在 JavaScript 中是 camelCase 的props: ['postTitle'],template: '&lt;h3&gt;{{ postTitle }}&lt;/h3&gt;'})&lt;!-- 父组件中 kebab-case 的 --&gt;&lt;blog-post post-title="hello!"&gt;&lt;/blog-post&gt;12345672 .单项数
Person.propTypes = {   //你类的属性规则 ,, static相当于直接给类本身添加了属性
                name: PropTypes.string.isRequired,
                sex: PropTypes.str
				
1.router.push(location, onComplete?, onAbort?)
这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
注意：在 Vue 实例内部，你可以通过 router.push。
当你点击  时，这个方法会在内部调用，所以说，点击  等同于调用 router.push(…)。
				
prop的作用是父组件向子组件单向传递数据，这个过程是单向的。传递的属性可以是静态的，可以是动态的，可以是数字，可以是字符串，可以是数组，还可以是对象，甚至可以在传递数据的时候写一个校验函数进行校验。
1、传静态属性
<template>
    <h1>{{ msg }}</h1>
</template>
<script>
export default ...
				
prop的大小写
HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase（驼峰命名法）的 prop 名需要使用其等价的 kebab-case（短横线分隔命名）。如果使用字符串模板，这个限制就不存在了。
prop类型
我们常见的 prop 是以字符串数组形式列出的 prop
props: ['title', 'likes', 'isActived']
但是，通常你也希望每个 prop 都有指定的值类型，这个时
				
这两天学习了Vuejs Prop感觉这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。
一、使用Prop传递数据
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用props把数据传给子组件。 
prop是父组件用来传递数据的一个自定义属性。子组件需要显示的地用props选项声明”prop”
Vue.component('child',{
  props:['message'],
  template:'<span>{{ message }}</span>'
然后向它传入一个普通字符串：
<child message="hel
				
转载自  PropProp 的大小写 (camelCase vs kebab-case)HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：Vue.component('blog-post', {
  // 在 Ja...
				
在Vue中，父组件可以通过props属性向子组件传递数据，子组件可以对props进行监听，避免了父组件与子组件之间的数据混乱。然而，如果子组件使用watch进行监听时发现无法得到要监听的prop的变化，可以考虑以下几个方面：
1.确保子组件的props属性是正确定义的，并且在父组件中正确绑定传递的prop值。
2.子组件中是否正确地声明要监听的props属性。watch监听props属性时，需要在属性名称前添加'props.'前缀。
3.父组件是否在子组件生成后修改了prop的值。如果这种情况出现，可以使用deep观察或在父组件中使用一个中间的computed属性来代替直接改变prop值。
4.如果父组件的prop值为一个引用类型（如数组或对象），那么子组件的watch只会监视到引用地址的变化。如果需要对引用类型的属性变化进行监听，可以通过在组件中使用Object.assign或者Vue.set()等方法来改变引用地址，从而触发watch的回调。
总的来说，在使用Vue中，要保持组件之间的数据流动的正确性和完整性，需要非常清晰地了解props的传递方式和watch的监听机制。只有在正确使用这些特性的情况下，才能让Vue的组件互相协同工作，完成更加复杂的任务。