Vue Props 组件传值教程

Question

Vue props 是父 组件 向子组件传递数据的一种方式。 道具用于将数据向下传递到组件树 ，将数据向上传递到组件树（从子级到父级），您可以使用 $emit() 或 Vuex 。

入门

当你 在 Vue 中创建一个组件时 ，你传递一个 description目的。 这 description.props字段是您指定组件可以接收哪些道具的地方。 最简单的方法是列出你的 props 作为属性名称的 数组 。

在下面的示例中， greet 组件接受单个道具， name，然后它使用 name 中的道具 模板 。

Vue.component('greet', {
  props: ['name'],
  template: `
    <div>
      Hello, {{name}}
    </div>
  `
});

const app = new Vue({
  template: `<greet name="World!"></greet>`
});

在上面的示例中，Vue 应用程序通过 name 支持 greet 作为 静态道具 。 换句话说，World 是一个硬编码字符串。 要传递动态值（绑定到变量的 Props），您需要添加前缀 name 和 v-bind: 创建组件时：

Vue.component('greet', {
  props: ['name'],
  // Renders "Hello, World"
  template: `
    <div>
      Hello, {{name}}
    </div>
  `
});

const app = new Vue({
  data: () => ({ value: 'World' }),
  // Note the `v-bind:` prefix. If you forget it, `greet` will treat
  // 'value' as a raw string and render "Hello, value"
  template: `<greet v-bind:name="value"></greet>`
});

Props 验证

Vue 有内置的 prop 验证 。 这意味着您可以检查道具是否是正确的类型或是否已设置。 请记住，道具验证 仅适用于开发模式 。 它被排除在 缩小的生产版本 。

下面是一个使用道具验证的例子。 注意 Vue 只打印一个警告， 错误 如果你传递一个非字符串，它不会抛出 name prop。

Vue.component('greet', {
  // Note the slightly different syntax. When doing validation, you set
  // `props` as an object with the prop names as the keys.
  props: {
    name: String
  },
  // Renders "Hello, 42"
  template: `
    <div>
      Hello, {{name}}
    </div>
  `
});

// Prints a warning:
// Invalid prop: type check failed for prop "name". Expected String
// with value "42", got Number with value 42.
const app = new Vue({
  data: () => ({ value: 42 }),
  template: `<greet v-bind:name="value"></greet>`
});

更改跟踪

需要注意的是， Props 只是单向的 。 如果您更改子组件中 prop 的值，这些更改 不会 冒泡到父组件。

例如，假设您有一个 input 在里面 greet 零件。 如果用户输入 input 以下， value 不会 改变 。

Vue.component('greet', {
  props: ['name'],
  // `name` will be 'World' initially, but changes will **not** affect
  // the parent component.
  template: `
    <div>
      <input v-model="name"></input>
    </div>
  `
});

const app = new Vue({
  data: () => ({ value: 'World' }),
  // `value` will always be 'World', `greet` cannot modify it.
  template: `
    <div>
      <greet v-bind:name="value"></greet>
      <div>
        Value: {{value}}
      </div>
    </div>
  `
});