javascript - 如何使用 VueJS 在带有按钮的图片周围显示边框？

Question

我尝试使用 VueJS 在带有按钮的图片周围显示边框，此边框在我的按钮上正常显示。我明白这一点，但我不明白如何链接按钮和图像以显示图片周围的边框。

Vue.component('my-button', 'my-img' {
  template: `<button :class="classObj" @click="toggleState()">My Button</button>
  <my-img :src="image1" @click="toggleState()" :class="classObj" >`,

  props: {
    state: {
      type: String
    }
  },

  data () {
    return {
      isActive: false, 
    }
  },

  computed: {
    classObj () {
      return {
        [this.state]: this.isActive
      }
    }
  },

  methods: {
    toggleState () {
      this.isActive = this.isActive ? false : true;
    }
  }
});

const App = new Vue({
  el: '#app',
  data: {
     image1 :"http://emersontech.net/wp-content/uploads/2013/05/java.jpg",
  },

});

Answer 1

我已经更改了您的代码，通过从按钮向父组件发出事件以更改状态来实现所需的结果，因此您无需为图像创建组件，只需使用<img .../>父模板中的标记。您还必须知道父组件和子组件之间的通信是使用 props 保证的。和 this.$emit()功能。 here the working solution