Vue Props 组件传值教程

发布于 2022-08-03 22:49:39 字数 3885 浏览 18 评论 0

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),您需要添加前缀 namev-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>
  `
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

七七

暂无简介

0 文章
0 评论
0 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。