组件间的通信

1.父组件和子组件的传值，函数的传递式触发

子组件：

<template>
    <div class="show-operation">
        
            <input type="text" v-model='info.name'>
            <input type="text" v-model='info.id'>
            <input type="text" v-model='info.ctime'>
            <input type="button" value="修改" @click="modify">
            <button><router-link to=/classes>cancel</router-link></button>
          
            <!-- 设置函数@click=触发函数 -->
    </div>
</template>

<script>
export default {
    name: 'modify',
    data(){
        return{
            info:"",        
            change:false
        }
    },
    mounted(){
        this.info = this.$route.query.per_info
        
    },

    
    methods:{
          modify(){           
              console.log("子组件")
              this.$emit("modify", [this.info, this.$route.query.per_info.id])

          }
    }

}
</script>

<style>
    .show-operation{
        position: absolute;
        top: 200px;
        left: 200px;
        background-color: red;
        width:200px;
        height: 200px;
        z-index: 5;
    }
</style>

父组件:

 <transition mode="out-in">
     <router-view @modify="modify"></router-view>                                      
 </transition>
   
script
{
　　modify(){
　　console.log('123')
}
}             

2. router-link的传值方式

<router-link :to="{path:'/classes/modify', query:{per_info:item}}">修改信息</router-link>

使用 :to的动态绑定，可以指定query附加参数

 

3渲染数据后，修改页面数据不刷新的问题

使用强制刷新或者修改数据的地址和长度（内存发生变化）

或者用:key绑定唯一标识符

 

4.组件传递 动态绑定的参数 

传递动态的绑定的参数，参数改变后，父组件接收的参数也会改变，并且无需再用函数触发