父子组件传值

父子组件传值

props

// 父组件
<div id="parent">
  <child :show="show"></child>
</div>
<script>
  // 定义全局组件
  Vue.component('child', {
    props: [show],
    template: `
            <div class="child">
                <span>{{show}}</span>
          </div>
        `
  })
  const app = new Vue({
    data: {
      show: false, // 子组件的状态
    },
  })
</script>

子组件改父组件的值

事件传递

// 父组件
<div id="parent">
  <child :show="show" @change="show=$event"></child>
</div>
<script>
  // 定义全局组件
  Vue.component('child', {
    props: [show],
    template: `
            <div class="child" v-if="show">
                <span @click="$emit('change',false)">{{show}}</span>
          </div>
        `
  })
  const app = new Vue({
    data: {
      show: false, // 子组件的状态
    },
  })
</script>

使用sync

// 父组件
<div id="parent">
  <child :show.sync="show"></child>
</div>
<script>
  // 定义全局组件
  Vue.component('child', {
    props: [show],
    template: `
            <div class="child" v-if="show">
                <span @click="$emit('update:show',false)">{{show}}</span>
          </div>
        `
  })
  const app = new Vue({
    data: {
      show: false, // 子组件的状态
    },
  })
</script>

使用了sync的修饰符，父级就不需要写方法的传递，不需要写事件的处理