If there is one thing that should be understood in the first step of vUE componentization development, it is undoubtedly how the communication between the parent and child components is realized (namely, how data is passed between the parent and child components). Only by understanding this step, can we develop the components better

Here are two key words: props and emit:

Before writing this component, take a look at the renderings:

Component development analysis:

Since it is a component:

  • First, the internal data content of the component must be mutable (such as “sort by time” in the figure above), which must be passed in by the parent (i.e. how the parent passes the data to the parent).
  • How to send data out after selecting content (that is, how children pass data to their parents)

Write the structure first:

The parent component

<! Dropdown box parent component -->
<template>
    <div id="app">
        <oSelect @changeOption="onChangeOption" :selectData="selectData"></oSelect>
        <! -- selectData: Pass in the data that the parent component needs to pass in; Format: childDataName = "parentDataName"; @childeventName ="parentEventName" onChangeOption: the name of the event triggered by the child component to receive the data from the child component by firing an event:
    </div>
</template>
<script>
import oSelect from "@/components/select.vue"; // Import components
export default{
    name: 'App',
    data(){
        return {
            selectData: {
                defaultIndex: 0.// By default, the number is selected
                selectStatus: false.// Use selectStatus to control the display/hide of the dropdown
                selectOptions: [ // In the dropdown box, data such as name, to see whether the project needs, can be modified by yourself
                    {
                        name: 'time'.context: 'Sorted by time'
                    },
                    {
                        name: 'view'.context: 'Sorted by pageviews'
                    },
                    {
                        name: 'like'.context: 'Sort by likes'
                    },
                    {
                        name: 'reply'.context: 'Sort by reply number'
                    },
                    {
                        name: 'reward'.context: 'In order of rewards'}]}}},methods:{
        onChangeOption(index){
        // The onChangeOption method is triggered by an event that passes a set of parameters, such as index
            this.selectData.defaultIndex = index;
        // When triggered, the required value is dynamically changed}},components: {
        oSelect,
        // Register the component}}</script>

Copy the code

Child components

<template>
<! Dropdown box component HTML Structure (child component) -->
<div class="select-box" @click="changeStatus">
<! -- changeStatus event: Click on the drop-down box to show and hide -->
<h3 class="select-title"
	:name="selectData.selectOptions[selectData.defaultIndex].name"
	:class="{'select-title-active': selectData.selectStatus}"> 
	<! -- dynamic binding of property name class -->
	{{ selectData.selectOptions[selectData.defaultIndex].context }} 
	<! -- here the main binding selected data -->
</h3>
<transition name="slide-down">
<! Transition to a drop-down list of hidden animations -->
<ul class="select-options" v-show="selectData.selectStatus">
    <li class="select-option-item" 
    	v-for="(item,index) in selectData.selectOptions"
    	@click="EmitchangeOption(index)"
    	:class="{'select-option-active':selectData.defaultIndex===index}">
    	<! EmitchangeOption: Click on a drop-down list event class: dynamically bind selected data -->
    	{{ selectData.selectOptions[index].context }}
    	
    </li>
    <div class="arrow-top"></div>
</ul>	
</transition>	
</div>    
</template>
<script>
export default{
    name: 'oSelect'.// It is recommended that we write this in order to know the name of this component
    // Use props to receive data from the parent component
    props:{
    	selectData: {
    		type: Object // Specify that the data passed is an object, otherwise an error will be reported.}},methods:{
    	EmitchangeOption(index){
    		this.$emit('changeOption',index);
    	    // The EmitchangeOption function is triggered by the click event, passing in the index value of the current click dropdown
    	    // The drop-down box triggers the changeOption function in the parent component through the emit method, and dynamically transmits the data required by the parent component. Here is the index value
    	},
    	changeStatus(){
    	    // Dynamically change the value of selectStatus through the changeStatus event to control the display and hiding of the drop-down box
    		this.selectData.selectStatus = !this.selectData.selectStatus
    	}
    }
}
</script>
Copy the code

conclusion

  • As you can see from the example above, when the parent component passes in data, you need to bind a property in the parent component and mount the data that needs to be passed in.
  • The child component receives data from the parent component using the props method.
  • The emit method is used by the child component to bind the pre-configured methods in the parent component to dynamically transfer the data required after the operation

The final effect is as follows:

The CSS in the component is attached for your reference only:

.select-box{
	position: relative;
	max-width: 250px;
	line-height: 35px;
	margin: 50px auto;
}
.select-title{
	position: relative;
	padding: 0 30px 0 10px;
	border: 1px solid #d8dce5;
	border-radius: 5px;
	transition-duration: 300ms;
	cursor: pointer;
}
.select-title:after{
	content: ' ';
	position: absolute;
	height: 0;
	width: 0;
	border-top: 6px solid #d8dce5;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	right: 9px;
	top: 0;
	bottom: 0;
	margin: auto;
	transition-duration: 300ms;
	transition-timing-function: ease-in-out;
}
.select-title-active{
	border-color: #409eff;
}
.select-title-active:after{
	transform: rotate(-180deg);
	border-top-color: #409eff;
}
.select-options{
	position: absolute;
	padding:10px 0;
	top: 45px;
	border:1px solid #d8dce5;
	width: 100%;
	border-radius: 5px;
}
.select-option-item{
	padding:0 10px;
	cursor: pointer;
	transition-duration: 300ms;
}
.select-option-item:hover..select-option-active{
	background: #f1f1f1;
	color: #409eff;
}

<!--The arrowcss-->
.arrow-top{
	position: absolute;
	height: 0;
	width: 0;
	top: -7px;
	border-bottom: 7px solid #d8dce5;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 99;
}
.arrow-top:after{
	content: ' ';
	position: absolute;
	display: block;
	height: 0;
	width: 0;
	border-bottom: 6px solid #fff;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	left: -6px;
	top: 1px;
	z-index: 99;
}

<!--Drop - down box shows hidden animation-->
.slide-down-enter-active..slide-down-leave{
	transition: all .3s ease-in-out;
	transform-origin:0 top;
	transform: scaleY(1);
}
.slide-down-enter{
	transform: scaleY(0);
}
.slide-down-leave-active{
	transition: all .3s ease-in-out;
	transform-origin:0 top;
	transform: scaleY(0);
}
Copy the code

Ok, about the end of this article, thank you for your reading, if there is something wrong, but also hope to correct, thank you very much, want to know more about the front-end related knowledge, please search wechat public number [big front-end JS], to know more about the hard technology of the front-end

Original is not easy to reproduce, please indicate the source, the impression of five