찾다

집 >웹 프론트엔드 >JS 튜토리얼 >아버지와 아들의 의사소통에 대한 자세한 해석

아버지와 아들의 의사소통에 대한 자세한 해석

亚连
亚连원래의
2018-06-19 17:48:381341검색

이 글에서는 주로 Vue에서 드롭다운 박스 컴포넌트를 통해 부모-자식 통신 관련 지식을 배울 수 있도록 소개하고 있으며, 부모 컴포넌트의 구현 코드가 포함되어 있으며 필요한 친구들이 참고할 수 있습니다. vue 구성 요소 개발에 대해 이야기합니다. 한 단계에서 이해해야 할 것이 있다면 의심할 여지 없이 상위 구성 요소와 하위 구성 요소 간의 통신이 어떻게 이루어지느냐입니다(직설적으로 말하면 상위 구성 요소와 하위 구성 요소에서 데이터가 전송되는 방식). 이 단계를 통해 컴포넌트를 더 잘 개발할 수 있습니다

여기 두 가지 핵심 단어가 있습니다: props와 Emit: 이 컴포넌트를 작성하기 전에 렌더링을 살펴보세요:

컴포넌트 개발 분석: 컴포넌트이기 때문에:

    우선, 컴포넌트의 내부 데이터 내용은 가변적이어야 하며(예: 위 그림의 "시간별 정렬") 상위 컴포넌트에 의해 전달되어야 합니다( 즉, 상위 구성 요소가 상위 구성 요소에 데이터를 전달하는 방법

    • 콘텐츠를 선택한 후 데이터를 전달하는 방법(즉, 하위 구성 요소가 상위 구성 요소에 데이터를 전달하는 방법)

    • 구조를 먼저 작성하세요.

부모 구성 요소

<!--下拉框父组件-->
<template>
 <p id="app">
  <oSelect @changeOption="onChangeOption" :selectData="selectData"></oSelect>
  <!--
  selectData: 传入父组件需要传入的数据；格式:childDataName="parentDataName";
  onChangeOption： 子组件触发的事件名，通过触发一个事件从而来接收子组件的传过来的数据
  格式：@childEventName="parentEventName"
  注：可写多个
  -->
 </p>
</template>
<script>
import oSelect from "@/components/select.vue"; //引入组件
export default{
 name: &#39;App&#39;,
 data(){
  return {
   selectData: {
    defaultIndex: 0, //默认选中的是第几个
    selectStatus: false, // 通过selectStatus来控制下拉框的显示/隐藏
    selectOptions: [ // 下拉框中的数据 name这样的参数，看项目是否有需求，可自行修改
     {
      name: &#39;time&#39;,
      context: &#39;按时间排序&#39;
     },
     {
      name: &#39;view&#39;,
      context: &#39;按浏览量排序&#39;
     },
     {
      name: &#39;like&#39;,
      context: &#39;按点赞数排序&#39;
     },
     {
      name: &#39;reply&#39;,
      context: &#39;按回复数排序&#39;
     },
     {
      name: &#39;reward&#39;,
      context: &#39;按打赏数排序&#39;
     }
    ]
   }
  }
 },
 methods:{
  onChangeOption(index){
  //子组件通过一个事件来触发onChangeOption方法，从而传递一系列参数，这里的index就是传过来的
   this.selectData.defaultIndex = index;
  //触发过后，动态改变了需要值 
  }
 },
 components: {
  oSelect,
  //注册组件
 }
}
</script>

하위 구성 요소

<template>
<!-- 下拉框组件html结构（子组件） -->
<p class="select-box" @click="changeStatus">
<!-- changeStatus事件: 点击实现下拉框的显示和隐藏 -->
<h3 class="select-title"
 :name="selectData.selectOptions[selectData.defaultIndex].name"
 :class="{&#39;select-title-active&#39;: selectData.selectStatus}"> 
 <!--属性name class的动态绑定-->
 {{ selectData.selectOptions[selectData.defaultIndex].context }} 
 <!--这里主要绑定选择的数据-->
</h3>
<transition name="slide-down">
<!--transition 实现下拉列表显示隐藏时的动画-->
<ul class="select-options" v-show="selectData.selectStatus">
 <li class="select-option-item" 
  v-for="(item,index) in selectData.selectOptions"
  @click="EmitchangeOption(index)"
  :class="{&#39;select-option-active&#39;:selectData.defaultIndex===index}">
  <!--
   v-for：循环数据渲染下拉列表
   EmitchangeOption：点击下拉列表事件
   class：动态绑定被选中的数据
  -->
  {{ selectData.selectOptions[index].context }}
  
 </li>
 <p class="arrow-top"></p>
</ul> 
</transition> 
</p> 
</template>
<script>
export default{
 name: &#39;oSelect&#39;, //建议大家都写上这个，有利于我们知道这个组件叫什么名字
 //通过props来接收父组件传过来的数据
 props:{
  selectData: {
  type: Object //规定传过来的数据为对象，否则就会报错（其实这样写就是规避错误和良好的习惯）
  }
 },
 methods:{
  EmitchangeOption(index){
  this.$emit(&#39;changeOption&#39;,index);
   // 通过点击事件触发EmitchangeOption函数，传入当前点击下拉列表中的索引值index
   // 下拉框通过emit方法触发父组件中changeOption函数，动态传给父组件需要的数据，这里为索引值
  },
  changeStatus(){
   // 通过changeStatus事件动态改变selectStatus的值，从而控制下拉框的显示隐藏
  this.selectData.selectStatus = !this.selectData.selectStatus
  }
 }
}
</script>

요약

    에서 볼 수 있듯이 위의 예에서는 상위 구성 요소가 전달될 때 데이터를 전달하려면 상위 구성 요소에 속성을 바인딩해야 합니다.

    • 하위 구성 요소는 상위 구성 요소를 받습니다. 구성 요소의 데이터는 props 메서드를 통해 수신됩니다. 하위 구성 요소는 데이터를 전송하기 위해 상위 구성 요소에 미리 설정된 메소드를 바인딩하기 위해 Emit 메소드를 사용해야 합니다. 그래야 작업 후에 필요한 데이터를 동적으로 전송할 수 있습니다

    • 최종 효과는 다음과 같습니다.

참조용으로 구성요소에 CSS가 첨부되어 있습니다. 

.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: &#39;&#39;;
 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;
}
<!--箭头css-->
.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: &#39;&#39;;
 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;
}
<!--下拉框显示隐藏动画-->
.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);
}

위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 관련 기사:

Node.js를 사용하여 정보 크롤러를 구현하는 방법(자세한 튜토리얼)

mock.js를 사용하여 임의의 데이터 생성

express+mockjs에서 백그라운드 데이터 전송을 구현하는 방법

위 내용은 아버지와 아들의 의사소통에 대한 자세한 해석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

node.js css express JS
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Vue를 사용하여 숫자 키보드 구성 요소를 구현하는 방법다음 기사：Vue를 사용하여 숫자 키보드 구성 요소를 구현하는 방법

관련 기사

더보기