可实现组件之间的通信,主要讲父子组件之间。
以自定义一个t-search组件为例。
<temple>
<div>
<p>{{ value }}</p>
<t-search @search="search"
/** 方式一实现value值动态更新 */
@input="input"
/** 方式二实现value值动态更新( 方式一的官方封装 ) */
v-modle='value'
></t-search>
</div>
</temple>
<script>
import Vue from 'vue';
const TSearch = Vue.extend({
temple: '<div> <input type="text" :value="value" @input="sendValue" @keyup.enter="sendSearchValue"></input> </div>',
props: ['value'],
methods: {
sendValue(e) {
this.emit('input', e.target.value);
},
sendSearchValue(e) {
this.emit('search', e.target.value);
}
}
});
export default Vue.extend({
data() {
return {
value: 'default'
}
},
methods() {
search(val) {
alert(val);
},
input(val) {
this.value = val;
}
},
components: {
TSearch
}
})
<script>
summary
publish / subscribe 模式; $emit 发布事件以及传递参数 父组件订阅事件后做出相关反应;
网友评论