VueJS 简单警报出现

Question

有人可以帮我完成这个简单的警报吗？我想要的是，如果我单击触发按钮，文本会出现，但组件应该发挥作用。

我是新手，正在学习 VueJS，现在在组件部分，但我还没有完全掌握它。

这是链接：JSBIN

JS 脚本片段

Vue.component('alert', {
  template: '#alert',
    props: {
      errors:false
    },
    data: function() {
      return {
        message:""
      }
    },
    methods: {
      appear: function (status) {
        if(status=="yes") {
          errors = true;
          message = "Appeared";
        }
      }
    }
});

var myapp = new Vue({
  components: 'alert',
  el: '#app',
  data: {

  },
  methods: {
    trigger: function() {
      this.$alert.appear("yes");
    }
  }


});

Answer 1

为了让您的代码按照我认为您试图让它工作的方式工作，我做了一些更改。

模板

<div id=app>
  <button @click="trigger">Trigger</button>
  <alert ref="alert"></alert>
</div>

代码

Vue.component('alert', {
  template: '#alert',
    data: function() {
      return {
        message:"",
        errors: false
      }
    },
    methods: {
      appear: function (status) {
        if(status=="yes") {
          this.errors = true;
          this.message = "Appeared";
        }
      }
    }
});

var myapp = new Vue({
  components: 'alert',
  el: '#app',
  data: {

  },
  methods: {
    trigger: function() {
      this.$refs.alert.appear("yes");
    }
  }
})

这里是updated bin。

这是一种非常不典型的方式来做这种事情。这是一个更惯用的警报示例。

Vue.component('alert', {
  props:["message","show"],
  template: '#alert',
});

var myapp = new Vue({
  el: '#app',
  data: {
    errors: false,
    errorMessage: null
  },
  methods: {
    trigger: function() {
      this.errors = true
      this.errorMessage = "Whoops!"
    }
  }
  
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

  <div id=app>
    <button @click="trigger">Trigger</button>
    <alert :message="errorMessage" :show="errors"></alert>
  </div>
  
  <template id="alert">
    <div v-show="show">
      <div>{{ message }}</div>
    </div>
  </template>

在第二个示例中，要在警报中显示的信息通过 properties 传递给警报组件，并且警报也通过属性触发。这就是你在 Vue 中通常会这样做的方式。