vue 封装组件，父访问子($children、$refs)，子访问父($parent、$root) 以及 sync、props/emit详解

vue 封装组件

//父组件
<shipNameDia
  :showDia="showDia"
  :urlHasShipInfo="urlHasShipInfo"
  :shipInfo="shipInfo"
  @handleBtnClick="btnClick"
></shipNameDia>

import shipNameDia from "@/components/shipNameDia";

export default {
  components: {
    shipNameDia,
  },
  data() {
    return {
    	showDia: false,
    	urlHasShipInfo: false,
    	shipInfo: {
        	name: "",
        	numList: [],
      	},
    },
    methods: {
    	btnClick(val, selectedText) {
    		console.log('111')
    	}
    }
  }

//子组件
<template>
	<van-dialog v-model="showDia">
		<div @click="handleBtnClick(1)">
			我是子组件：{{selectedText}}
		</div>
		<div v-show="urlHasShipInfo">{{ shipInfo.name }}</div>
	</van-dialog>
</template>

export default {
  props: {
    showDia: {
      type: Boolean,
      default: false,
    },
    urlHasShipInfo: {
      type: Boolean,
      default: false,
    },
    shipInfo: {
        type: Object,
        default: () => {
        	return null
      	}
    },
    configinfo: {
      type: Object,
      default: () => {
        return {
          name: '',
          type: {
            type: Array,
            default: () => {
              return []
            },
          },
        }
      },
    },
    targetCoord: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      selectedText: "浙龙港渔",
    };
  },
  methods: {
    handleBtnClick(val) {
        this.$emit('handleBtnClick', val, this.selectedText)
    }
  },
};

父访问子(children、refs)

this.$children  //返回的是一个数组，里面放的都是vue组件（VueComponent）

this.refs  //返回的是一个对象

子访问父(parent、root)

this.$parent  // 返回的是一个vue组件（VueComponent）

this.$root  // 返回的是一个vue实例（Vue）

组件传值的另一种方式：sync

//父组件：
<cpn :btnName.sync='num' ></cpn>

//子组件
<script>
export default {
    props: {
        btnName:{
            type : [String,Number],
            required: true
        }
    },
    methods: {
      changeNum(){
          this.$emit('update:btnName',888)
      }
  },

}
</script>

props/emit详解

实现子给父传参—给子组件绑定一个自定义事件，子组件使用emit触发该自定义事件

//父
<template>
  <div class="profile">
    <h1>我是profile</h1>
    <school @getSchoolName="getSchoolName"/>
   // <school @getSchoolName.once="getSchoolName"/> //只会执行一次
  </div>
</template>

<script>
import school from '../components/school.vue'
export default {
  components: {
    school
  },
  methods: {
    getSchoolName(name) {
      console.log('已收到学校名称:', name);
    }
  }
}
</script>

//子
<template>
  <div>
    <h3>学校名称：{{schoolName}}</h3>
    <h3>学校地址：{{schoolAddress}}</h3>
    <button @click="sendSchoolName">把学校名给profile</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            schoolName: 'w3c',
            schoolAddress: '杭州'
        }
    },
    methods: {
        sendSchoolName() {
            this.$emit('getSchoolName', this.schoolName)
        }
    }
}
</script>

实现子给父传参—利用ref获取子组件，给子组件绑定自定义事件（可以决定在何时绑定，用setTimeout）

//父
<template>
  <div class="profile">
    <h1>我是profile</h1>
    <school ref='school'/>
  </div>
</template>

<script>
import school from '../components/school.vue'
export default {
  components: {
    school
  },
  mounted() {
    this.$refs.school.$on('hahaha',this.getSchoolName)
    //this.$refs.school.$once('hahaha',this.getSchoolName) //只会执行一次
  },
  methods: {
    getSchoolName(name) {
      console.log('已收到学校名称:', name);
    }
  }
}
</script>

//子
<template>
  <div>
    <h3>学校名称：{{schoolName}}</h3>
    <h3>学校地址：{{schoolAddress}}</h3>
    <button @click="sendSchoolName">把学校名给profile</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            schoolName: 'w3c',
            schoolAddress: '杭州'
        }
    },
    methods: {
        sendSchoolName() {
            this.$emit('hahaha', this.schoolName)
        }
    }
}
</script>

实现子给父传参—给子组件传一个函数，props接收这个函数

//父
<template>
  <div class="profile">
    <h1>我是profile</h1>
    <school :getSchoolName="getSchoolName"/>
  </div>
</template>

<script>
import school from '../components/school.vue'
export default {
  components: {
    school
  },
  methods: {
    getSchoolName(name) {
      console.log('已收到学校名称:', name);
    }
  }
}
</script>

//子
<template>
  <div>
    <h3>学校名称：{{schoolName}}</h3>
    <h3>学校地址：{{schoolAddress}}</h3>
    <button @click="sendSchoolName">把学校名给profile</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            schoolName: 'w3c',
            schoolAddress: '杭州'
        }
    },
    props:['getSchoolName'],
    methods: {
        sendSchoolName() {
            this.getSchoolName(this.schoolName)
        }
    }
}
</script>

子组件解绑自定义事件

给子组件绑定元素dom事件

<school @click.native="demo"/>