Vue.js组件中prop的使用方法

关于父子组件之间的传值问题，我们需要用组件选项props。

	在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

首先介绍的是关于父子级组件的写法：

错误写法：
下面这种形式的写法是错误的，因为当子组件注册到父组件时，Vue.js会编译好父组件的模板，模板的内容已经决定了父组件将要渲染的HTML，在…运行时，它的一些子标签只会被当作普通的HTML来执行，不是标准的HTML标签，会被浏览器直接忽视掉。

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

在父组件标签之外使用子组件也是错误的

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

正确写法：

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

<script>
var childNode = {
  template: '<div>childNode</div>',
}
var parentNode = {
  template: `
  <div class="parent">
    <child></child>
    <child></child>
  </div>
  `,
  components: {
    'child': childNode
  } 
};
// 创建根实例
new Vue({
  el: '#example',
    components: {
    'parent': parentNode
  }  
})
</script>

最终相当于代码段变成：

<div id="example">
  <div class='parent'>
  	<div>childNode</div>
  	<div>childNode</div>
  </div>
</div>

接下来介绍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>

最终相当于代码段变成

<div id="example">
  <div class='parent'>
  	<div>aaa</div>
  	<div>bbb</div>
  </div>
</div>

命名规定
对于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。每当父组件的数据变化时，该变化也会传导给子组件。

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

关于单项数据流的问题
　prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。 这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
　另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了，Vue 会在控制台给出警告。
下面是一个典型例子：

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

<script>
var childNode = {
  template: `
  <div class="child">
    <div>
      <span>子组件数据</span>
      <input v-model="childMsg">
    </div>
    <p>{{childMsg}}</p>
  </div>
  `,
  props:['childMsg']
}
var parentNode = {
  template: `
  <div class="parent">
    <div>
      <span>父组件数据</span>
      <input v-model="msg">
    </div>
    <p>{{msg}}</p>
    <child :child-msg="msg"></child>
  </div>
  `,
  components: {
    'child': childNode
  },
  data(){
    return {
      'msg':'match'
    }
  }
};
// 创建根实例
new Vue({
  el: '#example',
  components: {
    'parent': parentNode
  }
})
</script>

父组件数据变化时，子组件数据会相应变化；而子组件数据变化时，父组件数据不变，并在控制台显示警告。

此文章引用：https://www.cnblogs.com/xiaohuochai/p/7388866.html