[JavaScript知识库]Vue初体验之组件通信和插槽

Vue初体验之组件通信和插槽

1、组件通信

在实际的项目开发过程中，很多业务逻辑里面，vue组件之间需要相互传递数据，传递数据就是组件通信

1.1、父传子

将父组件的数据传递给子组件

# 父组件
<子组件标签 :自定义属性='数据'></子组件标签>

# 子组件
export default {
    porps: ['自定义属性']
}
`或者`
export default {
    props: {
        自定义属性: {
            type: 数据类型,
            default: 默认值 // 返回数组：() => [];返回对象：() => ({})
            // 引用数据类型的默认值 建议通过函数 返回 赋值（防止引用数据类型的地址问题）
        }
    }
}
`子组件props 接收到的数据 用法和 data中的数据用法完全一致`

1.2、子传父

# 子组件
// 绑定事件，将参数传给函数；函数内部, `this.$emit('自定义事件类型', 参数)`
export default{
    methods:{
        callData(){
            //子传父
            this.$emit("自定义的事件类型名"，需要传递的数据)
        }
    }
}

# 父组件
// 自定义的事件类型名的函数不用传参
<子组件 变量=“属性值” 变量1=“属性值1” @自定义的事件类型名="执行函数名" ></子组件> 

export default{
    methods:{
        自定义的事件类型名(获取到的子组件的回传参数){
            //业务逻辑
        }
    }  
}

1.3、乱传(前提：两个组件之间必须要有关系)

中央事件总线$bus

所有组件需要传递数据 都直接存到 $bus

其他的所有的组件 都可以直接找 $bus 获取 数据

优点：无视层级传数据

缺点：必须在同一个 页面组件中，切换页面后 $bus 就无法触发事件

// 1. main.js中，将vue的实例对象挂载到Vue的原型对象上
Vue.prototype.$bus = new Vue();

// 2. 传值的组件：绑定事件，将参数传给函数；函数内部, `this.$bus.$emit('自定义事件类型', 数据)

// 3. 接值的组件：
created() {
    this.$bus.$on('自定义事件类型', data => {
        // data就是传过来的数据
    })
}

2、插槽

父组件把 html 代码 传给子组件

子组件预留 html代码的位置 给父组件

作用：私有化定制组件

2.1、匿名插槽

子组件内写入标签，slot标签就是预留给父组件的位置

# 子组件
</div>
	#子组件提前给父组件预留的位置 插槽
	<slot></slot>
</div>

# 父组件
<子组件>
    #写入替换 slot插槽的html代码
	html代码    
</子组件>

2.2、具名插槽

顾名思义，就是有名字的插槽

如果同一个子组件中出现多个 插槽 必须使用具名插槽

如果是同一个子组件中出现两个 插槽 可以一个匿名 一个具名

# 子组件
<div>
	<slot name="插槽名1"></slot>
    <slot name="插槽名2"></slot>
</div>

# 父组件
<子组件>
    <div slot="插槽名1"></div> 
    <div slot="插槽名2"></div> 
</子组件>

2.3、作用域插槽

将子组件的数据 回传给 父组件的插槽 部分的代码进行使用

一般情况下:作用域插槽 都是基于 具名插槽进行操作

延伸data里面数据的作用域范围

# 子组件
<div>
    <slot name="插槽名1" :变量=“str”></slot>    、
    <slot name="插槽名2"> </slot>
<div>
    
export default {
	data(){
    	return {
    		str:'象牙山小诸葛'
    	}
 	}    
}
    
# 父组件
<子组件>
    <div slot="插槽名1" slot-scope="scope">
    	{{ scope.变量 }}
    </div> 
    <div slot="插槽名2"></div> 
</子组件>

2.4、v-slot

父组件插槽语法简化，可以缩写为#，需要使用template包裹。

<!-- 具名插槽使用v-slot -->
#父组件
<子组件>
    <template #插槽名1>
			<div> </div>
	</template>
     <div v-slot="插槽名2">
    </div>
</子组件>

<!-- 作用域插槽使用v-slot -->
#父组件
<子组件>
    <template  #插槽名1="scope">
			<div >
                {{scope.变量}}
            </div>	
	</template>	
     <div slot="插槽名2">
    </div>
</子组件>