Vue组件通信

2021-05-14

vue

字数统计: 722字 | 阅读时长≈ 3分钟

Vue组件实例的作用域相互独立，不同组件之间的数据无法相互引用

props

参数props用于父组件向子组件传递数据

父组件调用子组件，在子组件的props写入需要的属性。传递时，在父组件内调用的子组件中直接使用。

可以传入静态的值：

//子组件
const app = Vue.createApp({})

app.component('blog-post', {
  props: ['title'],
  template: `<h4>{{ title }}</h4>`
})

app.mount('#blog-post-demo')

//父组件
<blog-post title="My journey with Vue"></blog-post>

也可以通过v-bind或简写:动态赋值

1
2
3

<blog-post :title="post.title"></blog-post>

<blog-post :title="post.title + 'by' + post.author.name "></blog-post>

除传递静态string值外，传入数据、布尔值、数组、对象等，即使传递静态数据也要使用v-bind告诉Vue。即<blog-post :like="42"></blog-post>

所有props均为单项数据流，即父级prop的更新会向下流动到子组件，无法由子组件传递给父组件。

emit

emit用于子组件向父组件传递数据

//父组件
//需要子组件提供postFontSize的值更新字体大小
<div :style="{fontSize: postFontSize + 'em'}">
    <!--父组件通过@/v-on监听子组件实例的enlarge-text事件将字体大小增大0.1，当子组件事件触发，则父组件通过此监听器接收到事件并更新需要的postFontSize值-->
    <blog-post
        v-for="post in posts"
        :key = "post.id"
        :title="post.title"
        @enlarge-text="postFontSize += 0.1"
    >
    </blog-post>
</div>

//子组件
app.component('blog-post', {
  props: ['title'],
  template: `
    <div class="blog-post">
      <h4>{{ title }}</h4>
      <!--子组件通过调用$emit方法传入事件名称enlargeText来触发事件-->
      <button @click="$emit('enlargeText')">
        Enlarge text
      </button>
    </div>
  `
})

$emit:

参数：{string}```eventName```, ```[...args]```

触发当前实例上的事件```eventName```，附加参数```args```会传给监听器回调

使用事件监听子组件

使用$emit的附加参数提供特定的值

//子组件
<button @click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>
//父组件
//通过$event访问被抛出的附加参数
<blog-post ... @enlarge-text="postFontSize += $event"></blog-post>

//若事件处理函数是一个方法，则此抛出的附加参数会作为方法的第一个参数传入
<blog-post ... @enlarge-text="onEnlargeText"></blog-post>

methods: {
  onEnlargeText(enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}

ref

provide&&inject

版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！