VueJS之组件通信、插槽、Element-ui

组件通信

父传子

父组件

<子组件 属性名="值" :属性名="动态数据" ...></子组件>

子组件

export default {
    //对象的方式  吐血推荐
    props:{
        属性名:{
            type:数据类型,(Number/String/Boolean/Array...),
            default:默认值,
            required:true,//必填项
        },
    	...
    }
}

子传父

子组件

this.$emit('自定义事件','要传递的数据')

父组件

<子标签 @自定义事件="函数"></子标签>
export default {
	methods:{
		函数名(data){
			//data子组件传递过来的数据
		}
	
	}
} 

BUS乱传(任意组件通信)

1.在main.js中,vue的实例对象并且挂载vue的原型对象上

Vue.prototype.$bus=new Vue();//挂载原型对象上  每个组件都可以使用$bus

2.传递数据

this.$bus.$emit('自定义事件','要传递的数据')

3.接收数据

created(){
	//监听
    this.$bus.$on("自定义事件",(data)=>{
        //data传递过来的数据
    })
}

4.缺陷

1.在实际开发过程，不建议使用乱穿。大量使用乱传，不好维护。

2.必须2个组件同时展示出来。

插槽—留个坑,使用者来填

匿名插槽

没有名字的坑

//留了一个坑  没有名字的坑
<slot>
   默认值
</slot>

具名插槽–至少2个坑

有名字的坑

<slot name="名字"></slot>
<slot></slot>

作用域插槽

带数据的坑

//带数据的坑
<slot :属性名="动态的值" 属性名="值" ...></slot>

<template slot-scope="变量名">
    {{变量名.属性名}}
    ...
</template>

Element-ui

是饿了么前端团队开发设计基于pc端一套ui组件库

安装

npm i element-ui
yarn add element-ui

引入

在main.js中

import ElementUI from 'element-ui';//导入element-ui
import 'element-ui/lib/theme-chalk/index.css';//导入element-ui的样式
Vue.use(ElementUI);//使用element-ui

使用–乾坤大挪移(cv)

#### 作用域插槽

带数据的坑

```js
//带数据的坑
<slot :属性名="动态的值" 属性名="值" ...></slot>

<template slot-scope="变量名">
    {{变量名.属性名}}
    ...
</template>

Element-ui

是饿了么前端团队开发设计基于pc端一套ui组件库

安装

npm i element-ui
yarn add element-ui

引入

在main.js中

import ElementUI from 'element-ui';//导入element-ui
import 'element-ui/lib/theme-chalk/index.css';//导入element-ui的样式
Vue.use(ElementUI);//使用element-ui

使用–乾坤大挪移(cv)