ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
A、****父组件执行子组件方法**** ref='funSon' 1.子组件上,添加 ref='funSon' 2.切换到子组件可直接写个 son() 方法 3.这里的 funSon 只是个名称 4.this.$refs.funSon.son(); 直接调用子组件的方法 this.$refs.funSon 返回的是一个vue对象,所以可以直接调用其方法 B、****子组件执行父组件方法**** @chirdfuntion="editfun" 1. chirdfuntion 这是我们要切换到子组件调用的名称 2. editfun 这是我们父组件 methods 里的一个方法 3. this.$emit('chirdfuntion'); 切换到子组件,看个方法 可以直接执行父组件的 editfun 方法 C、****子组件获取父组件的值**** :inputName="name" :pyp="age" 1. inputName pyp //子组件引的键; 2. name age //父组件data里面值得内容 3. 切换到子组件文件,直接引入 export default{ props:['inputName','pyp'], } 4. this.$props this.$props.inputName this.$props.pyp 这样子组件就拿到了父组件的值 D、****路由传值,取值**** 1. vue router/index.js 文件配置 { path: '/home/:id/:cusid', name:'Home' component: Home }, 2. 跳转到相对于的详情,这里的id cusid 取值根据借口返回或者我们自定义的值 名称要与路由index.js配置的相匹配 this.$router.push({path: `/home/${id}/${cusid}`}) 跳转的设置 this.$route.params.id this.$route.params.cusid 获取到我们的参数 ``` <template> <ass-two :inputName="name" :pyp="age" @chirdfuntion="editfun" ref='funSon' ></ass-two> </template> <script> /** ./ 是在当前文件所在的目录; ../ 是当前文件所在目录的父目录; **/ import AssTwo from "./AssemblyTwo";//组件的引入 再注册 export default { components: { //组件注册 AssTwo }, data() { return { name: "", }; }, methods:{ editfun(){ //方法 //执行子组件方法 }, } }; </script> <style scoped> </style> ```