Vue中el-dialog弹窗的父子组件传值

父传子

父传值就直接在引用的组件中通过props传递就可以了，这里传递手机号码和控制弹窗的dialogVisble。
父组件代码

引入组件及点击按钮传递visble

子组件代码


只要在props中接收就可以使用了

效果图：


这里是传递了控制弹窗的visble和手机号码，在关闭弹窗的时候子组件要把visble重新传递给父组件。

子传父

子传父用的是自定义点击事件

父组件代码：

 <test-dialog :dialogVisble="Visble" @childFn="receive" :phonenumber="phonenumber">
        </test-dialog>
 //@childFn="receive" 这里的receive是父组件接受的方法

receive(){
      this.Visble=false
    },
//因为是子组件关闭弹窗 这里就不传值了 直接写Visble=false，如果要传递的话在（）中放数据就可以

自组件代码：

  methods: {
    handleClose() {
      this.$emit("childFn");
      //这个ChildFn就是自定义方法，如果要传递数据可以这样写
      //this.$emit("childFn",'传递的数据');
      //然后在父组件方法中就可以拿到了
      //receive(value){
      //console.log(value) 这个value就是传递的值
      //},
    },
  },

然后我们在父组件中监听Visble的值 并打印
就可以看到在关闭弹窗的时候传递给父组件的值

  watch:{
    Visble:(newvalue,oldvalue)=>{
      console.log(newvalue)
    }
  },

效果：

打开弹窗的时候是true

关闭弹窗的时候是false

PS：因为props是单向字节流，所以不能去修改props的值，解决办法文档中也有。

官方文档链接: 点击.