Vue

by hysunny

HTML

<div id="app">
    isClick: {{ isClick }}
    <my-component :is-click="isClick" @click="isClick = !isClick"></my-component>
    <my-component :is-click="isClick"  @click.native="isClick = !isClick"></my-component>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

const MyComponent = {
	template: `<button>{{ text }}</button>`,
    props: ['isClick'],
    computed: {
    	text() {
        	return this.isClick ? 'Cancle Click' : 'Click Me'
        }
    }
}

new Vue({
  el: "#app",
  data: {
  	isClick: false
  },
  components: {
  	MyComponent
  }
})