发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

详细解读VUE父子组件的使用

阳光花仙子

6

主题

6

帖子

18

积分

新手上路

Rank: 1

积分
18
显示全部楼层
我们对父子组件的学习，接触的一般是子组件通过事件传参给父组件，父组件拿到参数再进行处理，用来处理表单提交，弹框信息等等，再者就是父组件通过自定义属性传值给子组件，子组件通过props接收，watch监听新值，达到组件的复用的效果；
后我在vue官网接触到一种子父组件深度耦合的方式，使我们不用额外的创建新的组件，也可以达到一些效果，下面与你们分享一下：

1.递归组件

看名字我们就知道，这是对组件进行递归，vue给我们提供的不只是递归子组件，而且可以在自己的模板中调用自己；
  1. //parent.vue
  2. <template>
  3. <div>
  4. //对子组件传值
  5. <HomeView :list="list"></HomeView>
  6. </div>
  7. </template>
  8. import HomeView from "./HomeView.vue";
  9. <script>
  10. export default{
  11.         component:{
  12.             HomeView
  13.         }
  14.         data(){
  15.             return{
  16.                  list: [{
  17.           name: "经济",
  18.           children: [{
  19.               name: "如家",
  20.               children: [{
  21.                   name: "上江路-如家"
  22.                 },
  23.                 {
  24.                   name: "望江路-如家"
  25.                 }]
  26.             },{
  27.               name: "7天",
  28.               children: [{
  29.                   name: "长江路-7天"
  30.                 },
  31.                 {
  32.                   name: "望江路-7天"
  33.                 }]
  34.             }]
  35.         }],
  36.             }
  37.         }
  38. }
  39. </script>
复制代码
这里面的数据是嵌套的，嵌套两层children，一般我们可能会拿到数据用两个标签嵌套渲染，这里vue给我们提供了调用自己组件的方法：
  1. //child.vue
  2. <template>
  3. <div>
  4. <div class="list-item" v-for="(item, index) in list" :key="index">
  5.             <div class="item-name">
  6.                 <span>{{item.name}}</span>
  7.             </div>
  8.             <div v-if="item.children" class="children-item">
  9.                     //调用自身  节省一个for循环
  10.                 <HomeView :list="item.children"></HomeView>
  11.             </div>
  12.         </div>
  13. </div>
  14. </template>
  15. <script>
  16. export default{
  17.         //通过name选项做调用自身的事情
  18.     name:'HomeView',
  19.       props:{
  20.         list: Array
  21.       },
  22. }
  23. </script>
复制代码
让原本两次for循环的模板变得简洁易懂，虽然节省了一次for循环，但是这样做也是有缺点的，就是容易陷入无限循环中，这是我们需要注意的，最后得到的效果是：

这是vue给我们提供的多一种的使用组件方式

2.组件之间的循环使用

你可以理解为子父组件的深度耦合，相互调用从而更方便达到节点数的效果，形成相互循环渲染的效果
效果图：

数据源：
  1. folders: [
  2.           {
  3.             name: 'folder1',
  4.             children: [{
  5.               name: 'folder1 - folder1',
  6.               children: [{
  7.                 name: 'folder1 - folder1 - folder1'
  8.               }]
  9.             }, {
  10.               name: 'folder1 - folder2',
  11.               children: [{
  12.                 name: 'folder1 - folder2 - folder1'
  13.               }, {
  14.                 name: 'folder1 - folder2 - folder2'
  15.               }]
  16.             }]
  17.           },
  18.           {
  19.             name: 'folder 2',
  20.             children: [{
  21.               name: 'folder2 - folder1',
  22.               children: [{
  23.                 name: 'folder2 - folder1 - folder1'
  24.               }]
  25.             }, {
  26.               name: 'folder2 - folder2',
  27.               children: [{
  28.                 name: 'folder2-content1'
  29.               }]
  30.             }]
  31.           },
  32.           {
  33.             name: 'folder 3',
  34.             children: [{
  35.               name: 'folder3 - folder1',
  36.               children: [{
  37.                 name: 'folder3 - folder1 - folder1'
  38.               }]
  39.             }, {
  40.               name: 'folder3 - folder2',
  41.               children: [{
  42.                 name: 'folder3-content1'
  43.               }]
  44.             }]
  45.           }
  46.         ],
复制代码
这个案例有爷爷组件这块我有在全局进行注册，HomeView.vue是爷爷组件，包含数据源，引进父级组件等操作；
main.js全局注册：

HomeView.vue（爷爷组件）：
  1. <template>  <div class="home">    <li v-for="folder in folders">    <about-view :folder="folder"></about-view>    </li>  </div></template><script>//引进父组件import AboutView from './AboutView.vue';export default {  components:{    AboutView,  },  data(){    return{       folders: [
  2.           {
  3.             name: 'folder1',
  4.             children: [{
  5.               name: 'folder1 - folder1',
  6.               children: [{
  7.                 name: 'folder1 - folder1 - folder1'
  8.               }]
  9.             }, {
  10.               name: 'folder1 - folder2',
  11.               children: [{
  12.                 name: 'folder1 - folder2 - folder1'
  13.               }, {
  14.                 name: 'folder1 - folder2 - folder2'
  15.               }]
  16.             }]
  17.           },
  18.           {
  19.             name: 'folder 2',
  20.             children: [{
  21.               name: 'folder2 - folder1',
  22.               children: [{
  23.                 name: 'folder2 - folder1 - folder1'
  24.               }]
  25.             }, {
  26.               name: 'folder2 - folder2',
  27.               children: [{
  28.                 name: 'folder2-content1'
  29.               }]
  30.             }]
  31.           },
  32.           {
  33.             name: 'folder 3',
  34.             children: [{
  35.               name: 'folder3 - folder1',
  36.               children: [{
  37.                 name: 'folder3 - folder1 - folder1'
  38.               }]
  39.             }, {
  40.               name: 'folder3 - folder2',
  41.               children: [{
  42.                 name: 'folder3-content1'
  43.               }]
  44.             }]
  45.           }
  46.         ],    }  },}</script>
复制代码
AboutView.vue(父级组件):
  1. <template>
  2. <div class="about">
  3. <p>
  4. <span>{{folder.name}}</span>
  5. <second-view :children="folder.children"></second-view>
  6. </p>
  7.   </div>
  8. </template>
  9. <script>
  10. export default{
  11.   props:['folder'],
  12.   components:{
  13.     // HomeView
  14.     SecondView:()=>import('./SecondView.vue')
  15.   },
  16.   data(){return{}},
  17. }
  18. </script>
复制代码
SecondView.vue(孙子组件)：
  1. <template>
  2. <div>
  3.         <ul>
  4.             <li v-for="child in children">
  5.             <about-view v-if="child.children" :folder="child"></about-view>
  6.             <span v-else>{{child.name}}</span>
  7.             </li>
  8.         </ul>
  9. </div>
  10. </template>
  11. <script>
  12. // import AboutView from './AboutView.vue'
  13. export default{
  14.     props:['children'],
  15.     components:{
  16.         AboutView:()=>import ('./AboutView.vue')
  17.     },
  18.     data(){return{}},
  19. }
  20. </script>
复制代码
写这个案例的时候出现了一个报错，是一个引入的逻辑错误，你需要找到一个循环支撑点，而又不能让他陷入无限循环，所以我让爷爷组件在全局注册，让子父组件异步引入，这样就可以解决报错问题，当然解决方法还有其他方式，例如在beaforecreate中引入，利用webpack等，欢迎相互讨论！

二，深层次的问题

该文章是介绍对于多次使用的表单抽离成公共组件，围绕抽离的公共组件的一些技巧和方法；
包含公共组件在父组件的多次使用方法，父组件通过ref调用子组件的方法等；
这是最基础的组件通讯方案：
1，2，3是回顾子组件，父子间，非父子组件的传参；
4，5介绍的是子组件复用，父组件调用子组件的方法使用；

**1.父传子**
  1. /父传子是自定义属性传值给子组件，子组件通过props接受传值，并渲染
  2. //父页面
  3. //<!-- 通过自定义属性传值给子组件 -->
  4. <Child :msg='msg'></Child>
  5. return {
  6.       msg:'父组件的值'
  7.     }
  8. //子页面
  9. <p>父组件的值为：{{msg}}</p>
  10. // 接受父组件传过来的值
  11.       props:['msg'],
复制代码
**2.子传父*

//子传父是自定义事件，通过$emit发送，父组件绑定自定义事件 //子组件  
  1. <button @click="sentInfo">通过自定义事件将值发送给父组件</button>
  2. return {
  3.       childInfo:'子组件的值'
  4.     }
  5.    methods: {
  6.    sentInfo(){
  7.       // 发送自定义事件
  8.       // console.log(this)
  9.       // this.$emit('自定义事件名',发送的值)
  10.       this.$emit('sendV',this.childInfo)
  11.     }
  12.   },
  13.   //父组件
  14.    <!-- 监听子组件的自定义事件 -->
  15. Child @sendV='showInfo'></Child>
  16.   return {
  17.       msg:'',//等待子组件的值
  18.     }
  19.    methods:{
  20.     // 监听的事件的函数的第一个参数就是传过来的值
  21.     showInfo(v){
  22.       console.log(v)// v只在{}内有效，父组件模板想要使用这个值，必须将值保存到自己的data中
  23.       this.msg = v
  24.     }
  25.   }
复制代码
**3.兄弟关系**

main.js中
//bus事件中心
  1. Vue.prototype.$event = new Vue()
复制代码
//兄弟组件是先在main.js初始化页面自定义事件通过​emit发送，b页面$on监听，
  1. one.vue:
  2. <button @click="senMsg">发起自定义事件并携带参数</button>
  3. return {
  4.       msg:"one组件的值"
  5.     }，
  6. methods:{
  7.     senMsg(){
  8.       this.$event.$emit('sendmsgInfo',this.msg)
  9.     }
  10.   }
  11.   //two.vue 监听自定义事件，并接受
  12.   mounted() {
  13.     // 进入页面就开始监听one的自定义事件
  14.     // this.$event.$on('监听的自定义事件名'函数（函数的第一个参数就是传过来的值）)
  15.    this.$event.$on('sendmsgInfo',(v)=>{
  16.     console.log(v)//one组件的值
  17.   })
  18.   },
复制代码
4.子组件复用
  1. //这是需要复用的结构，需要抽离成公共组件
  2. <template>
  3.     <div class=".main_input">
  4.         <el-select
  5.         v-model="name"
  6.         filterable
  7.         :filter-method="typeFiltersixone"
  8.         placeholder="请选择"
  9.         @change="chooseCustom"
  10.         ref="multiSelectsixone"
  11.         clearable>
  12.         <el-option
  13.         :value="treeDataValue"
  14.         style="height: auto">
  15.             <el-tree
  16.             :data="uDeptOptions"
  17.             :props="defaultProps"
  18.             :expand-on-click-node="false"
  19.             :filter-node-method="filterNode"
  20.             ref="treesixone"
  21.             default-expand-all
  22.             @node-click="handleNodeClick"
  23.             node-key="deptId" />
  24.             </el-option>
  25.         </el-select>
  26.     </div>
  27. </template>
复制代码
需求是需要复用表单查询，写一个组件复用人员查询模块；
这是正常的子父组件信息通讯，子组件通过事件$emit传递name和id，父组件传值watch监听变化；
  1. //父组件传值监听  
  2. props:{
  3.     wzryName:{
  4.        required: false
  5.     },
  6.     wzryId:{
  7.        required: false
  8.     },
  9.   },
  10.   watch:{
  11.     wzryName:{
  12.        handler(newValue, oldValue){
  13.          this.name = newValue
  14.        }
  15.     },
  16.      wzryId:{
  17.        handler(newValue, oldValue){
  18.          this.ids = newValue
  19.        }
  20.     }
  21.   },
复制代码
复用的方案是使用同一个子组件，父组件使用时，用单独的方法！
  1. //这就是复用的结构，
  2. //staff-queryitem是复用组件，复用两次，不同的是@returninput的方法不一样
  3.         <el-col :span="5">
  4.                         <el-form-item label="派发人姓名" prop="pfryxm">
  5.                                 <staff-queryitem @returninput="inputData"></staff-queryitem>
  6.                         //第一个组件时inpuData方法
  7.                         </el-form-item>
  8.                 </el-col>
  9.                         <el-col :span="5">
  10.                                 <el-form-item label="监督人姓名" prop="jdryxm">
  11.                                         <staff-queryitem @returninputtwo="inputDatatwo"></staff-queryitem>
  12.                      //第二个组件时inputDatatwo方法
  13.                                 </el-form-item>
  14.                         </el-col>
复制代码
单独传参
  1. //子传父
  2.     //两次复用对应两各不同的方法，分别传参
  3.                         inputData(name,id){
  4.                                         this.queryParams.pfryxm=name
  5.                                         this.queryParams.pfryId=id
  6.                         },
  7.                         inputDatatwo(name,id){
  8.                                         this.queryParams.jdryxm=name
  9.                                         this.queryParams.jdryId=id
  10.                         },
复制代码
5.父组件通过ref调用子组件的方法

案例一：父组件调用子组件的方法，对父组件的数据进行处理
  1. //以转换字符串方法为例：
  2. //子组件的方法
  3. methods:{
  4.         //在子组件中写好一个反转字符串的方法，
  5.         changetext(value){
  6.             return value.split('').reverse().join("");
  7.         }
  8.     },
  9. //父组件
  10. <template>
  11.   <div class="home">
  12.     <p>{{list}}</p>
  13.     <One ref="once"></One>
  14.     <button @click="reverse">转换子组件</button>
  15.   </div>
  16. </template>
  17. //引入子组件
  18. import One from '../components/One.vue';
  19. export default {
  20. components:{
  21.     One,
  22.   },
  23.     data(){
  24.         return{
  25.             list:'hellow'
  26.         }
  27.     },
  28.     methods:{
  29.             通过ref调用子组件写好的changetext方法
  30.         reverse(){
  31.             console.log(this.$refs.once)//返回的是一个vue对象，所以可以直接调用其方法
  32.             this.list= this.$refs.once.changetext(this.list)
  33.     },
  34.     },
  35. }
  36. </script>
复制代码
此方法可以用来解决子组件复用时，需要对表单进行联动时使用；避免子父组件的反复传参；
案例二：父组件调用组件一的方法，调用组件二的数据进行处理
  1. //还是以反转字符串为例
  2. //组件一：
  3.   methods:{
  4.      //组件一提供方法
  5.         changetext(value){
  6.             return value.split('').reverse().join("");
  7.         }
  8.     },
  9. //组件二：
  10. <template>
  11.   <div class="home">
  12.       <p>{{list}}</p>
  13.       <button @click="twos">发送数据</button>
  14.   </div>
  15. </template>
  16. <script>
  17. export default {
  18.   data(){
  19.       return{
  20.           list:'总是在梦里 我看到你无助的双眼'
  21.       }
  22.   },
  23.   methods:{
  24. //组件二点击发送this.list数据给父组件
  25.       twos(){
  26.           this.$emit('sendV',this.list)
  27.       },
  28.   }，
  29. }
  30. </script>
  31. //父组件
  32. <template>
  33.   <div class="home">
  34.     <p>{{info}}</p>
  35.     <One ref="once"></One>
  36.     <Two @sendV="Towsinfo"></Two>
  37.     <button @click="reverse">转换子组件</button>
  38.   </div>
  39. </template>
  40. <script>
  41. import One from '../components/One.vue'
  42. import Two from '../components/Two.vue'
  43. export default {
  44.   components:{
  45.     One,
  46.     Two
  47.   },
  48.   data(){
  49.     return{
  50.       info:''
  51.     }
  52.   },
  53.   methods:{
  54.     reverse(){
  55.      this.info= this.$refs.once.changetext(this.info)
  56.     },
  57.     Towsinfo(v){
  58.           console.log(v); //组件二发送的数据
  59.           this.info=v    //需要有一个变量接收
  60.     }
  61.   },
  62. }
  63. </script>
复制代码
通过这两个案例发现vue通过ref操作dom带来的好处是很明显的，便捷灵活的实现方案需求
到此这篇关于详细解读VUE父子组件的使用的文章就介绍到这了,更多相关VUE父子组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/283988.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: 深入理解Vue响应式原理及其实现方式

下一篇: 详细解读VUE父子组件的使用

发表于 2023-5-12 17:54:10

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4