FCAT

Appearance

应用场景 ​

通信关系传参动态实时传参调用方法
父 --> 子父组件 传参给 子组件父组件 动态传参给 子组件父组件 触发 子组件 方法
子 --> 父----子组件 触发 父组件 方法
爷 --> 孙爷组件 传参给 孙组件爷组件 动态传参给 孙组件爷组件 触发 孙组件 方法
孙 --> 爷----孙组件 触发 爷组件 方法
兄 --> 弟

父传子 ​

  1. 父组件 father.vue
html
<template>
    <div>
        <son :params="selectData"></son>
    </div>
</template>

<script>
import son from './xxx/son.vue'
export default {
    components: {
        son,
    },
    data() {
        return {
            selectData:{
                name:'',
                value:'',
            }
        }
    }
}
</script>
<template>
    <div>
        <son :params="selectData"></son>
    </div>
</template>

<script>
import son from './xxx/son.vue'
export default {
    components: {
        son,
    },
    data() {
        return {
            selectData:{
                name:'',
                value:'',
            }
        }
    }
}
</script>
  1. 子组件 son.vue

传给子组件的值是一个对象，父组件的值变化时，子组件的值也会变化。通过侦听属性的 deep 监听对象的属性的变化。

html
<template>
    <div>
        父组件传递的值变化时，这里也会变化：
        {{ params.name }} 
    </div>
</template>

<script>
export default {
    props: {
        params:Object
    },
    created(): {
        this.needData = this.params //赋值操作
    },
    watch: {
        needData:{
            handler(newVal,oldVal) {
                console.log(newVal)
                // Do something
            },
            deep:true,
            // immediate:true
        }
    },
    data() {
        return {
            needData:{ // 用来被组件传参赋值

            }
        }
    }
}
</script>
<template>
    <div>
        父组件传递的值变化时，这里也会变化：
        {{ params.name }} 
    </div>
</template>

<script>
export default {
    props: {
        params:Object
    },
    created(): {
        this.needData = this.params //赋值操作
    },
    watch: {
        needData:{
            handler(newVal,oldVal) {
                console.log(newVal)
                // Do something
            },
            deep:true,
            // immediate:true
        }
    },
    data() {
        return {
            needData:{ // 用来被组件传参赋值

            }
        }
    }
}
</script>

子组件调用父组件方法 ​

  1. 在子组件中通过“this.$parent.event”来调用父组件的方法
html
<template>
  <div> 
    <child></child>
  </div>
</template>
<script>
  import child from './components/childcomponent';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('父组件方法');
      }
    }
  };
</script>
<template>
  <div> 
    <child></child>
  </div>
</template>
<script>
  import child from './components/childcomponent';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('父组件方法');
      }
    }
  };
</script>
html
<template>
  <div>
    <button @click="childMethod()">点击按钮</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();// this.$parent.父组件方法名();
      }
      
    }
  };
</script>
<template>
  <div>
    <button @click="childMethod()">点击按钮</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();// this.$parent.父组件方法名();
      }
      
    }
  };
</script>
  1. 子组件用“$emit”向父组件触发一个事件,父组件监听这个事件
html
<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from './components/childcomponent'
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('父组件方法');
      }
    }
  };
</script>
<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from './components/childcomponent'
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('父组件方法');
      }
    }
  };
</script>
html
<template>
  <div>
    <button @click="childMethod()">点击按钮</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>
<template>
  <div>
    <button @click="childMethod()">点击按钮</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>
  1. 父组件把方法传入子组件中,在子组件里直接调用这个方法即可
html
<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from './components/childcomponent';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('父组件方法');
      }
    }
  };
</script>
<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from './components/childcomponent';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('父组件方法');
      }
    }
  };
</script>
html
<template>
  <div>
    <button @click="childMethod()">点击按钮</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
          this.fatherMethod();
        }
      }
  }
</script>
<template>
  <div>
    <button @click="childMethod()">点击按钮</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
          this.fatherMethod();
        }
      }
  }
</script>

父组件调用子组件方法 ​

Vuex ​

EventBus ​

如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即 EventBus来通信。

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。

eventBus,eventEmitter的区别 ​