vue2 this.$emit(“update:xx“,value)和xx.sync的用法

1 父组件

<div>

      <!-- dialog 弹框-->

      <button @click="visible = !visible" >点击弹框</button>

        //第一种用法

      <!-- <dialog-one  visible="visible" @update:visible="changeMessage" > -->

        //第二种用法

      <dialog-one  :visible.sync="visible" >

        <template v-slot:title>

          <h3>标题</h3>

        </template>

        <template>

          <p>主体内容，随便写点什么...</p>

          <p>主体内容，随便写点什么...说你想说的</p>

          <!-- <input type="text" placeholder="请输入信息" /> -->

        </template>

        <template v-slot:footer>

          <!-- <btn-one /> -->

          <button class="qx" @click="visible = false">取消</button>

          <button class="qd" type="primary" @click="visible = false">确定</button>

        </template>

      </dialog-one>

    </div>

 data(){

    return{

      visible: false,

    }

  },

  methods:{

    changeMessage(str){

      alert(1)

      this.visible = str;

    }

  }

2 子组件

<template>

  <div>

    <transition name="dialog-fade">

      <!--self：事件修饰符，只有点击自己才触发，点击子元素不触发  -->

      <div class="dialogWrapper" v-show="visible" @click.self="handleClose">

            <button class="dialogHeaderbtn" @click="handleClose">

              x

            </button>

        </div>

</transition>
 

 methods: {

    handleClose() {

      //visible是父组件传过来的props，子组件不能直接修改，需要子传父

      this.$emit("update:visible", false);//子组件传递到父组件，用以上两种方法任意一种都可以

        //第一种用法，必须在methods中写函数

  <!-- <dialog-one  visible="visible" @update:visible="changeMessage" > -->

        //第二种用法： 不需要写函数，直接父组件可以接受响应。

   //   <dialog-one  :visible.sync="visible" >

    },

  }

这篇好文章是转载于：学新通技术网