Vue-component实现动态组件切换传值问题

Vue-component实现动态组件切换传值问题

使用动态组件

vue提供了一个内置的 <component> 组件， 专门用来实现动态组件的渲染 。通俗的讲 component属于占位符的，在指定条件下替换成指定的组件即可

创建<component>占位

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <keep-alive include="Left">
        <component :is="nameCom" :currentProp="this.currentProp"></component>
      </keep-alive>
    </div>

    <Button @click="changeLeft">Left</Button>
    <Button @click="changeRight">Right</Button>
  </div>
</template>

:is属性指定当前设置组件的变量名称，且该变量名称需要在data节点下定义
keep-alive 嵌套的组件实现切换状态保活

<script>
import Left from "./components/Left.vue";
import Right from "./components/Right.vue";
export default {
  data() {
    return {
      nameCom: 'Left',
    };
  },
  computed: {
    currentProp() {
      switch (this.nameCom) {
        case 'Left':
          return { name: "Rose", age: 12, address: "BJ" };
        case 'Right':
          return { nick: "Rose", age: 12, sex: "woman" };
        default:
          return { name: "Rose", age: 12, address: "BJ" };
      }
    },
  },
  components: {
    Left,
    Right,
  },
  methods: {
    changeLeft() {
      this.nameCom = "Left";
    },

    changeRight() {
      this.nameCom = "Right";
    },
  },
};
</script>

script标签下实现了组件的导入、注册、切换组件是传值的功能（父组件给子组件传值使用自定义属性），子组件定义props接收属性，当前属性类型为对象格式，方便不同的业务场景需不同的业务参数，将其构建在对象中，进行传递。

Left组件：

<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <p>{{ count }}</p>
     <p>{{ transmitData }}</p>

    <button @click="add">add</button>
  </div>
</template>

<script>
export default {
  // name:'LeftCom',
  data() {
    return {
      count: 0,
      transmitData:{}
    };
  },
  methods: {
    add() {
      this.count++;
    },
  },
  props: {
    currentProp: {
      type: Object,
    },
  },
  created(){
    this.transmitData = this.currentProp
     console.log("Left"+JSON.stringify(this.currentProp));
  }
};
</script>

Right组件：

<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <p>{{transmitData}}</p>
  </div>
</template>

<script>
export default {
  // name:'RightCom'
  props:{
    currentProp:{
      type:Object
    }
  },
  data(){
    return{
       transmitData:{}
    }
  },
  created(){
    this.transmitData=this.currentProp
    console.log("Left"+JSON.stringify(this.currentProp));
  },
};
</script>

这样就实现了，切换组件时传递不同的值给子组件