vue2的一些重要知识点

v-model（$lister,$attrs） 在组件上的运用

// 父组件
<template>
  <div>
    16
    <childVue
      v-model="isShow"
      @test="test"
    />
    {{ 'title' + title }}
  </div>
</template>

<script>
import childVue from './components/child.vue'

export default {
  components: { childVue },
  $zdr: ['a'],
  data() {
    return {
      title: '12',
      isShow: true
    }
  },
  mounted() {
    console.log(this.$zdr.a)
    console.log(this.$listeners)
  },
  methods: {
    test(value) {
      console.log(value, '接到了@listner的数据')
    }
  }
}
</script>

<style scoped></style>

// 子组件
<template>
  <div v-if="show">
    <!-- <grandson
      v-on="$listeners"
      v-bind="$attrs"
    ></grandson> -->
    我是子组件
    <div @click="update1">关闭子组件</div>
  </div>
</template>

<script>
import grandson from './grandson.vue'
export default {
  //components: { grandson },
  props: {
    title: String,
    show: Boolean,
    value: Boolean
  },
  model: {
    prop: 'show',
    event: 'change'
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    update1() {
      this.$emit('change', false)
    }
  }
}
</script>
<style scoped></style>

孙子组件向上抛事件

<template>
  <div>grandson</div>
</template>

<script>
export default {
  components: {},
  props: {
    title: String
  },
  data() {
    return {}
  },
  mounted() {
    this.$emit('test', '11')
    console.log(this.title)
  },
  methods: {}
}
</script>

<style scoped></style>

中间组件没接的attr,才会被传递到最后一层组件

.sync

.sync作用与v-model作用几乎一样，但是一个组件上只能有一个v-model，而.sync可以有很多个