Vue

by javad ebrahimi

HTML

<div id="app">
  <test ref='my'></test>
  <button @click='toggle'>Toggle Show</button>
</div>

CSS

body {
  background: #20262E;
  padding: 30px;
  font-family: 'segoe UI';
}

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

Vue

const customComponent={
name:"test",
props:{
active:{
      type: Boolean,
      default: true
}
},
updated:function(){
console.log("لاگ")
},
template:"<div v-if='active'>الان داره منو نشون میده . . . :D</div>"
}

new Vue({
  el: "#app",
  data(){
  return{
  jj:true
  }
  },
  components:{test:customComponent},
  methods: {
toggle:function(){
let x= this.$refs.my.active
this.$refs.my.active=!x
}
  }
})