文件目录

//父页面：
<template>
//3 使用组件并向子组件传值 this.id和本页面的参数一致 userid 要和子组件中接收参数的值一致
<UpdateMaterial v-show="UpdateMaterial1" :userid="this.id"></UpdateMaterial>

</template>
<script>
  //1 引入组件
 import UpdateMaterial from "@/components/UpdateMaterial.vue";
 //2 注册组件 不用在router文件夹的index.js中注册组件 这个是局部组件 在要用的的页面注册即可
 export default {
      components:{
          UpdateMaterial
      },
      data(){
      	return{
      	    id:22
      	}
      }
}
 </script>

//子组件页面
<template>
    <div >
   		<h1 >{{userid}}</h1>
        <el-button @click="q">dianhtcg</el-button>
    </div>
</template>
<script>
    export default {
        data(){
            return{
            
            }
        },
        //声明这个参数是从父组件来的 userid与父页面绑定的值一样 多个值之间用逗号隔开
       props:[
           'userid'
       ],
        methods:{
        //这样在方法里面就直接对userid 进行操作了
            q(){
                alert("userid~"+this.userid);
            }
        }
    }
</script>

https://www.cnblogs.com/aidixie/p/10385948.html