Vue引用其他组件，但组件某些部分不需要时的简单处理

项目开发时，我们会把多个地方重复使用的模块抽象成组件，提供给大家一起使用，但是使用组件的时候偶尔会遇见一些问题，比如说组件里只有某些东西自己并不需要，这个时候我们可以对组件进行简单的修改，而不影响其他人的使用。

这里有一个方法，举个例子简单说明一下。

我们在页面上引入一个其他组件，然后给组件传入一个状态值。

页面

<template>

  <div>

    <show-my-test :state="true"></show-my-test>

  </div>

</template>

<script>

  import showMyTest from '~/components/showMyTest.vue';

  export default {

    name: 'index',

    components: {

      showMyTest: showMyTest

    }

  };

</script>

<style scoped>

</style>

组件通过props获取Boolean类型的值，如果没有获取到值则会默认为false，我们可以通过这个来解决一些问题。

组件

<template>

  <div>

     <div>

       <p>今天是周一！</p>

     </div>

     <div v-if=“!state”>

       <p>今天天气不错</p>

     </div>

  </div>

</template>

<script>

  export default {

    name: 'index',

    props: {

      state: {

        type: Array

     }

  };

</script>

<style scoped>

</style>

这样的话，在使用上面这个组件的时候，如果没有给组件传state的值，则今天天气不错那里正常显示，不影响使用，如果给组件传了一个true的值，则这一块则不会显示。

通过这样的方法可以解决挺多组件复用时候产生的问题，这里只是一个简单的例子，实际问题应该根据需求来处理。

恩，就酱～

巴特西

Vue引用其他组件，但组件某些部分不需要时的简单处理

最新文章

热门文章