Vue组件通信四种方式
程序员文章站
2022-07-02 23:02:41
先来介绍一下Vue组件的类型1.全局组件Vue.component('my-component-name', { // ... 选项 ...})//使用时 2.局部组件var ComponentA = { data:... template:... methods:...}new Vue(...
先来介绍一下Vue组件的类型
1.全局组件
Vue.component('my-component-name', {
// ... 选项 ...
})
//使用时
<div id="app">
<my-component-name></my-component-name>
</div>
2.局部组件
var ComponentA = {
data:...
template:...
methods:...
}
new Vue({
el: '#app',
components: {
'component-a': ComponentA
}
})
3.单文件组件
.vue文件,一个文件就是一个组件,一般vue构建一个项目时用到。
//一般三部分组成
<template>
<style>
<script>
组件通信的方法
-
props
和$emit
父组件给子组件传值:父组件给子组件设置自定义属性,子组件添加props
来接受属性。
子组件给父组件传值:父组件给子组件设置自定义函数,子组件通过$emit
给父组件的自定义函数传递参数 ,父组件通过接收参数获取到子组件传递过来的值。
let parent = {
data: function () {
return {
msg: '我是父组件',
msgToChild: '父组件给子组件的数据',
msgFromChild:'还未收到子组件的数据'
}
},
methods: {
fn(value){//父组件用来接收数据
this.msgFromChild = value
}
},
template: `
<div>
<div>{{msg}}</div>
<div>{{msgFromChild}}</div>
<child :tit="msgToChild" @onfn='fn'></child>
</div>`
}
let child = {
data: function () {
return {
msg: '我是子组件',
msgToParent:'子组件给父组件的数据'
}
},
methods: {
//通过某种方式(按需要)触发$emit给父组件传递数据
send(){
this.$emit('onfn',this.msgToParent)
}
},
props: ['tit'],
template: `
<div>
<p>{{msg}}</p>
<p>{{tit}}</p>
<button @click='send'>点击给父组件发送数据</button>
</div>`
}
-
$parent
和$children
在子组件中可以通过this.$parent.xxx
来获取到父组件的数据,并且是他的亲生父亲。如果某个组件没有父亲,那么this.$parent
获取到的是它本身。
在父组件中,可以通过this.$children
来获取到它的子组件,但是和parent
不同的是,通过this.$children
获取到的是一个数组,包括它所有的子组件。为了准确获取到某一个子组件的数据,可以通过设置子组件属性ref
,例如<child ref='num1'></child>
,在父组件中通过$children.refs.num1.xxx
来获取到特定的子组件的数据。
这种方法在组件嵌套多层的时候不太适应。 -
$emit
和$on
这种方式不仅适用于父子组件,还适用于其他关系的组件,保证两个接口名称相同,就可以进行数据的发送和接收
var Event = new Vue(); //准备一个空实例对象
//组件一中
Event.$emit('接口名','数据1');
//组件二中
Event.$on('接口名',function('参数'){
//接收到数据1,进行操作
})
- 插槽
父组件使用其他组件的时候,会用到标签的形式。例如,自定义组件com
,那么在使用这个组件的时候,是这样的形式<com></com>
,那么标签中间就可以放一些数据,通过在子组件中定义插槽slot
来接收这些数据。
//组件com1的template
<div>
<slot name = 's1' :msg="数据"></slot>
<p>我是组件com1</p>
<slot name = 's2'><slot>
</div>
//组件com2使用com1,com2的template
<div>
<p>com2自己的一些内容</p>
<com1>
<template #s1="res">
这里也可以获取子组件的数据,例如:res.msg
插入一些数据
</template>
<template #s2>
插入另一些数据
</template>
<com2>
</div>
需要注意的是slot的name
和#
对应,这种方式不仅可以传递数据,还可以传递html代码。
- vuex
vuex是一个文件,可以在搭建vue项目时使用,用来共享数据。
具体可以查看官方文档
本文地址:https://blog.csdn.net/weixin_42834729/article/details/107297387