vue中把弹出层.vue文件注册成组件供其他.vue文件调用的写法

背景:因弹出层多个页面的详情都是一样的,因此把弹出层定义成组件,多次调用

        定义组件的过程中出现很多问题,因此再次记录最终成功的写法        

一、 简单实现页面调用弹出层组件的打开弹出层方法:

1. 弹出层组件 (index.vue)文件定义:



2. 在某个页面中引入弹出层组件并使用:


结: 弹出层正常定义,父组件中把该弹出层定义成组件进行调用,
        调用步骤:
                1. 引入堂出差组件:  import xxx from  xxxx
                2. 注册堂出差组件:  components: { xxx}, 
                3. 调用打开弹出层的方法:this.$refs.xxx.open(row.id);
                4. 弹出层组件的使用(使用这个标签)需要添加ref属性,否则第3步无法成功

二、子父组件间通信 (如上的弹出层就是子组件,引入并使用了弹出层组件的就是父组件)

       1.  子组件(弹出层)定义props,并在props中定义子父通信的属性,如下代码中的pid
        2. 父组件 只要定义有跟子组件中props定义的属性相同即可

        (如下代码,子组件在props中定义了pid,那么父组件只需要在data下的return中定义有这个属性,之后这个属性有任何值子组件都能同步到)



                    
                    

你可能感兴趣的:(vue,Ruoyi,vue.js,前端,Ruoyi)