prop

来源：互联网发布：淘宝收藏修改分类编辑：程序博客网时间：2024/06/06 20:08

使用 Prop 传递数据

组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。

子组件要显式地用 props 选项声明它期待获得的数据：

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 可以用在模板内
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})

然后我们可以这样向它传入一个普通字符串：

<child message="hello!"></child>

结果：

hello!

<body><div id="box"><div><child v-text='message'></child><child v-bind:message="ab"></child><child message="message"></child></div></div></body></html><script>Vue.component('child', {// 声明 propsprops: ['message'],// 就像 data 一样，prop 可以用在模板内// 同样也可以在 vm 实例中像 “this.message” 这样使用template: '<span>{{ message }}</span>'})new Vue({el: '#box',data: {message: 333,ab:'ddd'}})</script>

阅读全文

0 0