vue 组件问题

Question

看了个与弹框相似的梨子后，打算自己试着写个小弹框组件，然而，并不能实现点击出现弹框的效果，求大神看看哪里写错了~~

<template>
  <div>
    <button @click="show=true">打开弹框</button>
    <dialog v-model="show"></dialog>
  </div>
</template>
<script>
import Dialog from "./components/Demo.vue";
export default {
  components: {
    Dialog
  },
  data() {
    return {
      msg: "我是父级来的信息",
      show: false
    };
  }
};
</script>

<template>
  <div class="dialog-wrap" v-show="value">
    <div class="dialog">
      <span @click="close">X</span>
      <p>这是一个弹框内容：+{{msg}}</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "dialog",
  props: ["msg", "value"],
  methods: {
    close() {
      this.$emit("input", false);
    }
  }
};
</script>
<style>
.dialog-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.7);
  position: relative;
}
.dialog {
  width: 200px;
  height: 150px;
  background: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -100px;
}

.dialog span {
  display: block;
  position: absolute;
  top: 15px;
  right: 15px;
}
</style>

参考的例子如下：

<template>
  <div class="hello">
    <button @click="show=true">打开model</button>
    <demo v-model="show"></demo>
  </div>
</template>
<script>
import Demo from "./components/Demo.vue";
export default {
  name: "hello",
  components: {
    Demo
  },
  data() {
    return {
      show: false
    };
  }
};
</script>

<template>
  <div v-show="value">
    <div>
      <p>这是一个Model框</p>
      <button @click="close">关闭model</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "demo",
  props: ["value"],
  methods: {
    close() {
      this.$emit("input", false);
    }
  }
};
</script>

Answer 1

dialog是html标签，不能用于自定义标签

Answer 2

<dialog v-model="show"></dialog>换成
<dialog v-if="show"></dialog>
dialog内的v-show不要了，也不传value

Answer 3

原因：dialog是HTML标签http://www.w3school.com.cn/ta...，换了就可以

<template>
  <div id="wrap">
    <button @click="show=true">打开弹框</button>
    <dialog-box v-model="show"></dialog-box>
  </div>
</template>
<script>
import DialogBox from "./components/Demo.vue";
export default {
  components: {
    DialogBox
  },
  data() {
    return {
      msg: "我是父级来的信息",
      show: false
    };
  }
};
</script>

<template>
  <div class="dialog-wrap" v-show="value">
    <div class="dialog">
      <span @click="close">X</span>
      <p>这是一个弹框内容：+{{msg}}</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "dialog-box",
  props: ["msg", "value"],
  methods: {
    close() {
      this.$emit("input", false);
    }
  }
};
</script>
<style>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#wrap {
  width: 100%;
  height: 100%;
}
.dialog-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.7);
  position: relative;
}
.dialog {
  width: 200px;
  height: 150px;
  background: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -100px;
}

.dialog span {
  display: block;
  position: absolute;
  top: 15px;
  right: 15px;
}
</style>