组件的动态切换及父子组件之间的通信

1.动态的切换组件

我们常常通过例如<com/>单标签的方式显示，这种方式组件是静态的。
实现动态组件的方式：使用标签<component :is=‘Com’>的方式。
例如：我们可以通过事件触发的方式来实现组件的切换。

<template>
  <div class="home">
  //通过事件触发的方式来动态的改变组件
    <button @click.prevent="change(1)">comName1</button>
    <button @click.prevent="change(2)">comName2</button>
    //实现动态组件的方式，comName是一个变量。
    <components :is="comName"/>
  </div>
</template>
<script>
import ComName1 from '../components/comName1.vue'
import ComName2 from '../components/comName2.vue'
export default {
  name: 'Home',
  components: {
    ComName1,
    ComName2
  },
  data(){
    return{
      comName:'ComName1',
      name:undefined,
    }
  },
  methods:{
    change(e){
      console.log(e);
      if(e===1){
          this.comName='ComName1';
      }
      else
      this.comName='ComName2';
    }
  }
}
</script>

2.父子组件之间的通信

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

在父组件中给调用的子组件标签上添加属性，属性的值是传递的参数。
在子组件中使用props属性接收参数。
例：

# 父组件 Father.vue
//将参数传递给子组件
        <son :tag="info" @lhh-Data="handleCompData"/>
import son from '../components/son'
export default {
    components:{
        son,
    },
    data(){
        return{
             info:'',
        }
    },
}

#子组件  son.vue
	<h2>这是父组件传递的参数:{{tag}}</h2>
export default {
  //子组件接受父组件的参数
     props:['tag'],
     data(){
         return{
             msg:'son component data',
         }
     },
}

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

# 子组件 son.vue
 <button @click="handleClick"> click</button>
export default {
     data(){
         return{
             msg:'son component data',
         }
     },
     methods:{
         handleClick(){
             //将数据传递给父组件
             this.$emit('lhh-Data',this.msg)
         }
     }
}
# 父组件 Father.vue
//通过监听器来获取子组件传递的参数
 <son @lhh-Data="handleCompData"/>
 methods:{
        handleCompData(v){
            console.log(v);
        }
    }