组建通信，动态组件

最新推荐文章于 2023-11-15 09:00:00 发布

丶Parousia

最新推荐文章于 2023-11-15 09:00:00 发布

阅读量151

点赞数

分类专栏：前端 vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_33721570/article/details/95237053

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

vue

8 篇文章 0 订阅

订阅专栏

组件通信

father->child

1、父组件配置Vue.component（）中定义要传递的参数


	data () {

            return {

                num : 100,

            }

        }

2、父组件中的子组件标签添加单项数据绑定

	<child-box :num="num"></child-box>

3、子组件配置Vue.component（）中添加接收变量

props : [‘num’]（props的取值可以是一个数组）

4、即可在子组件中以num使用变量

child->father

1、子组件配置Vue.component（）中定义要传递的参数


	data () {

            return{

                num : 100,

                }

            }

        },

2、父组件中的子组件标签通过事件绑定的形式绑定一个自定义事件

	<child-box @give="getData"></child-box>

3、子组件添加事件用来触发自定义事件

	<button @click="giveFather">传递给父元素</button>

	methods : {

            giveFather () {

                this.$emit('give',this.dataObj);

            }

        }

4、父组件配置Vue.component（）中添加参数以及getData方法

	data () {

            return {

                num : 0,

            }

        },

        methods : {

            getData ( val ) {

                this.num = val.num;

            }

        }

child->otherchild

ref

1、通过ref绑定组件

	<son ref = "son"></son>

      <girl ref = "girl"></girl>

2、子组件配置Vue.component（）中定义要传递的参数

	data () {

            return{

                num : 100,

                }

            }

        },

3、共同父组件的 $refs里面可以找到子组件，定义变量接收son组件要传递的变量

	data () {

		return {

			num: 0

		}

	},

	methods: {

		look () {

			this.num = this.$refs.son.num

		}

	}

4、父组件中的girl组件标签添加单项数据绑定

	<girl ref="girl" :num="num"></girl-box>

5、在girl组件配置并接受传递的参数

	data () {

            return {

                num : 0

            }

        },

        methods: {

            out () {

                this.num = this.$attrs.num 

            }

        }

bus

1、子组件配置Vue.component（）中定义要传递的参数

	data () {

            return{

                num : 100,

                }

            }

        },

2、子组件添加事件用来触发自定义事件

	<button @click="giveFather">传递给父元素</button>

	methods : {

            giveFather () {

                this.$emit('give',this.num);

            }

        }

3、新建bus对象

	var bus = new Vue();

3、在另一个接收的组件的挂载钩子函数上做事件的声明

	data () {

		return {

			num : 0

		}

	},

	mounted () { 

		//当前组件挂载结束，也就是我们可以在页面当中看到真实dom

		// mounted这个钩子函数的触发条件是组件创建时会自动触发

		// 事件的声明

		var _this = this 

		bus.$on( 'give',function ( val ) {

			_this.num= val

		})

	}

非正规

自定义事件

自定义的通过 $on 定义 $emit触发

   var vm = new Vue({
   el: '#app'
   })

   // 自定义事件的定义（ 发布 ）

   // vm.$on(自定义事件的名称，自定义事件的事件处理程序)

   vm.$on( 'aa', function () {
   console.log( 'aa' )
   })

   //自定义事件的触发 （ 订阅 ）

   // vm.$emit( 自定义事件的名称，自定义事件处理程序需要的参数1，参数2，参数3)

   vm.$emit( 'aa' )

通过绑定在组件身上定义，通过 $emit触发
<Son @aa = “fn”/>

使用：子父通信

动态组件

通过 Vue 提供了一个 component + is 属性

1、建立动态模块

	<component :is = "name"></component>

2、父元素中定义name

	data: {
       	name: 'Aa'	//name是更换组件的名称
	},

3、设置按钮事件更改name

	methods: {

		change () {

			this.name= (this.name=== 'Aa'?'Bb':'Aa')

		}

	}

4、Vue提供了一个叫做 keep-alive 的组件可以将我们的组件进行浏览器缓存，需要缓存的话在component 标签外套一个

	<keep-alive include=""></keep-alive>

即可

slot 插槽

作用/概念: 预先将将来要使用的内容进行保留

1、新建模块

	<模块><slot></slot></模块>

2、在使用时

	<模块><h1>text</h1></模块>

标签内的内容会加载到 slot 标签中

如果有多个模块，定义时以 name 属性区分

	<slot name = "header"></slot>

	<slot name = "footer"></slot>

使用时，以 slot = ‘name’ 区分

	<header slot = 'header'> 这里是头部 </header>

	<footer slot = 'footer'> 这里是底部 </footer>

注意：以上两种形式在 vue2.6以上被废弃

用 v-slot指令来代替

经具名插槽和作用域插槽进行统一
要将这两个属性带有 vue的标志，并且符合vue两个最大的特性之一：指令的概念

  <slot name = "header"></slot>

  <slot name = 'footer'></slot>

使用时，以 v-slot ：name 区分

  <template v-slot:header>

          <h1>Here might be a page title</h1>

  </template>

  

  <template v-slot:footer>

  		<p>Here's some contact info</p>

  </template>