詳細解讀VUE父子組件的使用

更新時間：2023年05月11日 09:32:52 作者：北安棲梧

這篇文章主要介紹了詳細解讀VUE父子組件的使用,今天來講一種子父組件深度耦合的方式，使我們不用額外的創(chuàng)建新的組件，也可以達到一些效果，下面與你們分享一下

我們對父子組件的學習，接觸的一般是子組件通過事件傳參給父組件，父組件拿到參數(shù)再進行處理，用來處理表單提交，彈框信息等等，再者就是父組件通過自定義屬性傳值給子組件，子組件通過props接收，watch監(jiān)聽新值，達到組件的復用的效果；

后我在vue官網(wǎng)接觸到一種子父組件深度耦合的方式，使我們不用額外的創(chuàng)建新的組件，也可以達到一些效果，下面與你們分享一下：

1.遞歸組件

看名字我們就知道，這是對組件進行遞歸，vue給我們提供的不只是遞歸子組件，而且可以在自己的模板中調(diào)用自己；

//parent.vue
<template>
<div>
//對子組件傳值
<HomeView :list="list"></HomeView>
</div>
</template>
import HomeView from "./HomeView.vue";
<script>
export default{
        component:{
            HomeView
        }
        data(){
            return{
                 list: [{
          name: "經(jīng)濟",
          children: [{
              name: "如家",
              children: [{
                  name: "上江路-如家"
                },
                {
                  name: "望江路-如家"
                }]
            },{
              name: "7天",
              children: [{
                  name: "長江路-7天"
                },
                {
                  name: "望江路-7天"
                }]
            }]
        }],
            }
        }
}
</script>

這里面的數(shù)據(jù)是嵌套的，嵌套兩層children，一般我們可能會拿到數(shù)據(jù)用兩個標簽嵌套渲染，這里vue給我們提供了調(diào)用自己組件的方法：

//child.vue
<template>
<div>
 <div class="list-item" v-for="(item, index) in list" :key="index">
            <div class="item-name">
                <span>{{item.name}}</span>
            </div>
            <div v-if="item.children" class="children-item">
                    //調(diào)用自身  節(jié)省一個for循環(huán)
                <HomeView :list="item.children"></HomeView>
            </div>
        </div>
</div>
</template>
<script>
export default{
        //通過name選項做調(diào)用自身的事情
    name:'HomeView',
      props:{
        list: Array
      },
}
</script>

讓原本兩次for循環(huán)的模板變得簡潔易懂，雖然節(jié)省了一次for循環(huán)，但是這樣做也是有缺點的，就是容易陷入無限循環(huán)中，這是我們需要注意的，最后得到的效果是：

這是vue給我們提供的多一種的使用組件方式

2.組件之間的循環(huán)使用

你可以理解為子父組件的深度耦合，相互調(diào)用從而更方便達到節(jié)點數(shù)的效果，形成相互循環(huán)渲染的效果

效果圖：

數(shù)據(jù)源：

 folders: [
          {
            name: 'folder1',
            children: [{
              name: 'folder1 - folder1',
              children: [{
                name: 'folder1 - folder1 - folder1'
              }]
            }, {
              name: 'folder1 - folder2',
              children: [{
                name: 'folder1 - folder2 - folder1'
              }, {
                name: 'folder1 - folder2 - folder2'
              }]
            }]
          },
          {
            name: 'folder 2',
            children: [{
              name: 'folder2 - folder1',
              children: [{
                name: 'folder2 - folder1 - folder1'
              }]
            }, {
              name: 'folder2 - folder2',
              children: [{
                name: 'folder2-content1'
              }]
            }]
          },
          {
            name: 'folder 3',
            children: [{
              name: 'folder3 - folder1',
              children: [{
                name: 'folder3 - folder1 - folder1'
              }]
            }, {
              name: 'folder3 - folder2',
              children: [{
                name: 'folder3-content1'
              }]
            }]
          }
        ],

這個案例有爺爺組件這塊我有在全局進行注冊，HomeView.vue是爺爺組件，包含數(shù)據(jù)源，引進父級組件等操作；

main.js全局注冊：

HomeView.vue（爺爺組件）：

<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: [
          {
            name: 'folder1',
            children: [{
              name: 'folder1 - folder1',
              children: [{
                name: 'folder1 - folder1 - folder1'
              }]
            }, {
              name: 'folder1 - folder2',
              children: [{
                name: 'folder1 - folder2 - folder1'
              }, {
                name: 'folder1 - folder2 - folder2'
              }]
            }]
          },
          {
            name: 'folder 2',
            children: [{
              name: 'folder2 - folder1',
              children: [{
                name: 'folder2 - folder1 - folder1'
              }]
            }, {
              name: 'folder2 - folder2',
              children: [{
                name: 'folder2-content1'
              }]
            }]
          },
          {
            name: 'folder 3',
            children: [{
              name: 'folder3 - folder1',
              children: [{
                name: 'folder3 - folder1 - folder1'
              }]
            }, {
              name: 'folder3 - folder2',
              children: [{
                name: 'folder3-content1'
              }]
            }]
          }
        ],
    }
  },
}
</script>

AboutView.vue(父級組件):

<template>
 <div class="about">
<p>
<span>{{folder.name}}</span>
<second-view :children="folder.children"></second-view>
</p>
  </div>
</template>
<script>
export default{
  props:['folder'],
  components:{
    // HomeView
    SecondView:()=>import('./SecondView.vue')
  },
  data(){return{}},
}
</script>

SecondView.vue(孫子組件)：

<template>
<div>
        <ul>
            <li v-for="child in children">
            <about-view v-if="child.children" :folder="child"></about-view>
            <span v-else>{{child.name}}</span>
            </li>
        </ul>
</div>
</template>
<script>
// import AboutView from './AboutView.vue'
export default{
    props:['children'],
    components:{
        AboutView:()=>import ('./AboutView.vue')
    },
    data(){return{}},
}
</script>

寫這個案例的時候出現(xiàn)了一個報錯，是一個引入的邏輯錯誤，你需要找到一個循環(huán)支撐點，而又不能讓他陷入無限循環(huán)，所以我讓爺爺組件在全局注冊，讓子父組件異步引入，這樣就可以解決報錯問題，當然解決方法還有其他方式，例如在beaforecreate中引入，利用webpack等，歡迎相互討論！

二，深層次的問題

該文章是介紹對于多次使用的表單抽離成公共組件，圍繞抽離的公共組件的一些技巧和方法；

包含公共組件在父組件的多次使用方法，父組件通過ref調(diào)用子組件的方法等；

這是最基礎(chǔ)的組件通訊方案：

1，2，3是回顧子組件，父子間，非父子組件的傳參；

4，5介紹的是子組件復用，父組件調(diào)用子組件的方法使用；

1.父傳子

/父傳子是自定義屬性傳值給子組件，子組件通過props接受傳值，并渲染
//父頁面
//<!-- 通過自定義屬性傳值給子組件 -->
<Child :msg='msg'></Child>
 return {
      msg:'父組件的值'
    }
//子頁面
<p>父組件的值為：{{msg}}</p>
// 接受父組件傳過來的值
      props:['msg'],

**2.子傳父*

//子傳父是自定義事件，通過$emit發(fā)送，父組件綁定自定義事件 //子組件

<button @click="sentInfo">通過自定義事件將值發(fā)送給父組件</button>
 return {
      childInfo:'子組件的值'
    }
   methods: {
   sentInfo(){
      // 發(fā)送自定義事件
      // console.log(this)
      // this.$emit('自定義事件名',發(fā)送的值)
      this.$emit('sendV',this.childInfo)
    }
  },
  //父組件
   <!-- 監(jiān)聽子組件的自定義事件 -->
 Child @sendV='showInfo'></Child>
  return {
      msg:'',//等待子組件的值
    }
   methods:{
    // 監(jiān)聽的事件的函數(shù)的第一個參數(shù)就是傳過來的值
    showInfo(v){
      console.log(v)// v只在{}內(nèi)有效，父組件模板想要使用這個值，必須將值保存到自己的data中
      this.msg = v
    }
  }

3.兄弟關(guān)系

main.js中

//bus事件中心

Vue.prototype.$event = new Vue()

//兄弟組件是先在main.js初始化頁面自定義事件通過?emit發(fā)送，b頁面$on監(jiān)聽，

one.vue:
<button @click="senMsg">發(fā)起自定義事件并攜帶參數(shù)</button>
 return {
      msg:"one組件的值"
    }，
 methods:{
    senMsg(){
      this.$event.$emit('sendmsgInfo',this.msg)
    }
  }
  //two.vue 監(jiān)聽自定義事件，并接受
  mounted() {
    // 進入頁面就開始監(jiān)聽one的自定義事件
    // this.$event.$on('監(jiān)聽的自定義事件名'函數(shù)（函數(shù)的第一個參數(shù)就是傳過來的值）)
   this.$event.$on('sendmsgInfo',(v)=>{
    console.log(v)//one組件的值
  })
  },

4.子組件復用

//這是需要復用的結(jié)構(gòu)，需要抽離成公共組件
<template>
    <div class=".main_input">
        <el-select 
        v-model="name" 
        filterable 
        :filter-method="typeFiltersixone" 
        placeholder="請選擇"
        @change="chooseCustom" 
        ref="multiSelectsixone" 
        clearable>
        <el-option 
        :value="treeDataValue" 
        style="height: auto">
            <el-tree 
            :data="uDeptOptions" 
            :props="defaultProps" 
            :expand-on-click-node="false"
            :filter-node-method="filterNode" 
            ref="treesixone" 
            default-expand-all
            @node-click="handleNodeClick" 
            node-key="deptId" />
            </el-option>
        </el-select>
    </div>
</template>

需求是需要復用表單查詢，寫一個組件復用人員查詢模塊；

這是正常的子父組件信息通訊，子組件通過事件$emit傳遞name和id，父組件傳值watch監(jiān)聽變化；

//父組件傳值監(jiān)聽  
 props:{
    wzryName:{
       required: false
    },
    wzryId:{
       required: false
    },
  },
  watch:{
    wzryName:{
       handler(newValue, oldValue){
         this.name = newValue
       }
    },
     wzryId:{
       handler(newValue, oldValue){
         this.ids = newValue
       }
    }
  },

復用的方案是使用同一個子組件，父組件使用時，用單獨的方法！

//這就是復用的結(jié)構(gòu)，
//staff-queryitem是復用組件，復用兩次，不同的是@returninput的方法不一樣
        <el-col :span="5">
			<el-form-item label="派發(fā)人姓名" prop="pfryxm">
				<staff-queryitem @returninput="inputData"></staff-queryitem>
                        //第一個組件時inpuData方法
			</el-form-item>
		</el-col>
			<el-col :span="5">
				<el-form-item label="監(jiān)督人姓名" prop="jdryxm">
					<staff-queryitem @returninputtwo="inputDatatwo"></staff-queryitem>
                     //第二個組件時inputDatatwo方法
				</el-form-item>
			</el-col>

單獨傳參

//子傳父
    //兩次復用對應(yīng)兩各不同的方法，分別傳參
			inputData(name,id){
					this.queryParams.pfryxm=name
					this.queryParams.pfryId=id
			},
			inputDatatwo(name,id){
					this.queryParams.jdryxm=name
					this.queryParams.jdryId=id
			},

5.父組件通過ref調(diào)用子組件的方法

案例一：父組件調(diào)用子組件的方法，對父組件的數(shù)據(jù)進行處理

//以轉(zhuǎn)換字符串方法為例：
//子組件的方法
methods:{
        //在子組件中寫好一個反轉(zhuǎn)字符串的方法，
        changetext(value){
            return value.split('').reverse().join("");
        }
    },
//父組件
<template>
  <div class="home">
    <p>{{list}}</p>
    <One ref="once"></One>
    <button @click="reverse">轉(zhuǎn)換子組件</button>
  </div>
</template>
//引入子組件
import One from '../components/One.vue';
export default {
 components:{
    One,
  },
    data(){
        return{
            list:'hellow'
        }
    },
    methods:{
            通過ref調(diào)用子組件寫好的changetext方法
        reverse(){
            console.log(this.$refs.once)//返回的是一個vue對象，所以可以直接調(diào)用其方法
            this.list= this.$refs.once.changetext(this.list)
    },
    },
}
</script>

此方法可以用來解決子組件復用時，需要對表單進行聯(lián)動時使用；避免子父組件的反復傳參；

案例二：父組件調(diào)用組件一的方法，調(diào)用組件二的數(shù)據(jù)進行處理

//還是以反轉(zhuǎn)字符串為例
//組件一：
  methods:{
     //組件一提供方法
        changetext(value){
            return value.split('').reverse().join("");
        }
    },
//組件二：
<template>
  <div class="home">
      <p>{{list}}</p>
      <button @click="twos">發(fā)送數(shù)據(jù)</button>
  </div>
</template>
<script>
export default {
  data(){
      return{
          list:'總是在夢里 我看到你無助的雙眼'
      }
  },
  methods:{
//組件二點擊發(fā)送this.list數(shù)據(jù)給父組件
      twos(){
          this.$emit('sendV',this.list)
      },
  }，
}
</script>
//父組件
<template>
  <div class="home">
    <p>{{info}}</p>
    <One ref="once"></One>
    <Two @sendV="Towsinfo"></Two>
    <button @click="reverse">轉(zhuǎn)換子組件</button>
  </div>
</template>
<script>
import One from '../components/One.vue'
import Two from '../components/Two.vue'
export default {
  components:{
    One,
    Two
  },
  data(){
    return{
      info:''
    }
  },
  methods:{
    reverse(){
     this.info= this.$refs.once.changetext(this.info)
    },
    Towsinfo(v){
          console.log(v); //組件二發(fā)送的數(shù)據(jù)
          this.info=v    //需要有一個變量接收
    }
  },
}
</script>

通過這兩個案例發(fā)現(xiàn)vue通過ref操作dom帶來的好處是很明顯的，便捷靈活的實現(xiàn)方案需求

到此這篇關(guān)于詳細解讀VUE父子組件的使用的文章就介紹到這了,更多相關(guān)VUE父子組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: