vue.js2.0父子组件间传参 （二）实现弹窗

1. 父组件

<template>  <div class="hello">    <button @click="changeShow">显示元素</button>   <test :name="show" @changeShowChild = "changeShow"></test>  </div></template><script>  import test from './test.vue'export default {  name: 'hello',  data () {    return {      msg: 'Welcome to Your Vue.js App',      show: false    }  },  methods : {    changeShow () {      this.show = !this.show    }  },  components:{    test  }}</script><style scoped></style>

2.子组件

<template>  <div v-if="selfShow">    <button @click="changeShowChild" >to hidden</button>  </div></template><script>  export default {    methods: {      changeShowChild () {        this.$emit('changeShowChild')      }    },    computed :{      selfShow () {        return this.$attrs.name      }    }  }</script><style></style>