Vue组件通信

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

props

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

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

可以传入静态的值:

1
2
3
4
5
6
7
8
9
10
11
12
//子组件
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用于子组件向父组件传递数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//父组件
//需要子组件提供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的附加参数提供特定的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//子组件
<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 许可协议。转载请注明出处!
  • © 2020-2021 Aweso Lynn
  • PV: UV: