vue prop

Props

父组件通过 props 向下传递数据给子组件。为了实现父子组件解耦，在子组件props中定义子组件希望用到的父组件的属性

静态props

子组件直接定义props数组，父组件传值即可。

var childNode = {
  template: `
        <div>
          {{forChildMsg}}
        </div>
        `,
  props: ["for-child-msg"]
};
var parentNode = {
  template: `
        <div>
          <p>parentNode</p>
          <child for-child-msg="aaa"></child>
          <child for-child-msg="bbb"></child>
        </div>
        `,
  components: {
    child: childNode
  }
};

动态props

子组件定义props数组，父组件使用v-bind绑定数据，并把数据放入data

var parentNode = {
  template: `
        <div>
          <p>parentNode</p>
          <child :for-child-msg="childMsg1"></child>
          <child :for-child-msg="childMsg2"></child>
        </div>
        `,
  components: {
    child: childNode
  },
  data: function() {
    return {
      childMsg1: "Dynamic props msg for child-1",
      childMsg2: "Dynamic props msg for child-2"
    };
  }
};

component就是使用了动态props

插槽props

实现了子组件向父组件共享值

子组件：

<template>
  <div class="child">
    <h3>这里是子组件</h3>
    <slot v-bind:data="data"></slot>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      data: ["zhangsan", "lisi", "wanwu", "zhaoliu", "tianqi", "xiaoba"]
    };
  },
</script>

在slot标签中绑定的属性称为插槽props

父组件：

<template>
  <div class="father">
    <h3>这是作用域slot</h3>
    <child>
      <template v-slot:default="slotProps">
        <div class="tmpl">
          <span v-for="item in slotProps.data">{{item}}</span>
        </div>
      </template>
    </child>
  </div>
</template>

父组件通过v-slot:default为插槽props确定一个名字，（可以随意起，不一定是slotProps），之后子组件中绑定的属性都是slotProps的一个属性。