组件之间的通信

父组件传递参数给孙子组件

//父组件 <search :active="6"></search>

//子组件 search
  <menu-icon v-bind="$attrs"></menu-icon>
  <van-search></van-search>
  export default{
       inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性
  }

//孙子组件
  props:{
        active:{
           type:Number
        },
    }

.sync 修饰符

对 prop 进行“双向绑定”

• 子组件

this.$emit('update:title', newTitle);

• 父组件

<text-document v-bind:title.sync="doc.title"></text-document>

强制刷新组件

• 使用 v-if 指令

<template>
    <comp v-if="update"></comp>
    <button @click="reload()">刷新comp组件</button>
</template>
<script>
import comp from '@/views/comp.vue'
export default {
    name: 'parentComp',
    data() {
        return {
            update: true
        }
    },
    methods: {
        reload() {
            // 移除组件
            this.update = false
            // 在组件移除后，重新渲染组件
            // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
            this.$nextTick(() => {
                this.update = true
            })
        }
    }
}
</script>

• 使用 this.$forceUpdate 强制重新渲染

<template>
<button @click="reload()">刷新当前组件</button>
</template>
<script>
export default {
    name: 'comp',
    methods: {
        reload() {
            this.$forceUpdate()
        }
    }
}
</script>