Vue2.0 상위-하위 컴포넌트 전송 기능에 대한 자세한 설명-JS 튜토리얼-php.cn

Vue2.0 상위-하위 컴포넌트 전송 기능에 대한 자세한 설명

小云云

풀어 주다： 2018-01-15 17:04:01

원래의

2838명이 탐색했습니다.

이 글은 주로 Vue2.0 상위-하위 컴포넌트 전송 기능에 대한 자세한 튜토리얼을 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

Vue.js란 무엇인가요?

Vue.js(/vjuː/로 발음, view와 유사)는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 다른 헤비급 프레임워크와 달리 Vue는 상향식 증분 개발 설계를 채택합니다. Vue의 핵심 라이브러리는 뷰 레이어에만 중점을 두고 있습니다. 시작하기 쉬울 뿐만 아니라 타사 라이브러리나 기존 프로젝트와도 쉽게 통합할 수 있습니다. 반면 Vue는 Vue 생태계에서 지원하는 단일 파일 구성 요소 및 라이브러리와 결합하면 복잡한 단일 페이지 애플리케이션을 완벽하게 구동할 수 있습니다.

연구 참고 사항: vue2.0에서는 상위 구성 요소가 하위 구성 요소를 호출할 때 상위 구성 요소에 함수 본문을 전달하려고 합니다.

1 소품을 통해: 하위 구성 요소에서 매개 변수를 전달해야 하는 경우에 적용됩니다. 상위 구성 요소

// 상위 구성 요소.vue

<template>
 <p>
  <ok-input :params=&#39;number&#39; :callback=&#39;callbackNum&#39;></ok-input>
 </p>
</template>
<script type="text/ecmascript-6">
 import okInput from '../ok-input/okinput.vue';
 export default {
  props: {},
  data() {
   return {
    number: {},
    callbackNum: function (x) {
     console.log(x);
    }
   };
  },
  methods: {
  },
  components: {
   'ok-input': okInput
  }
 };
</script>

로그인 후 복사

// 하위 구성 요소.vue

<template>
 <p>
   <input v-model=&#39;numVal&#39; @change=&#39;handleFun&#39;></input>
 </p>
</template>
<script type="text/ecmascript-6">
 import {Input, Select, Option, Button} from 'element-ui';
 import 'element-ui/lib/theme-default/index.css';
 export default {
  props: {
   params: {
    type: Object,
    default: {
     type: ''
    }
   },
   callback: {}
  },
  data() {
   return {
    x: 'hah',  
    numVal: ''
   };
  },
  methods: {
   handleFun(val) {
     this.callback(val); // 将参数传回父组件中的回调函数
   }
  },
  components: {
   'el-input': Input,
  }
 };
</script>

로그인 후 복사

2. $emit을 통해: 현재 작업 개체를 가져올 때만 적용 가능

// 父组件.vue
<template>
 <p>
  <ok-input :params=&#39;inputs&#39; @change=&#39;handleAge&#39;></ok-input>
 </p>
</template>
<script type="text/ecmascript-6">
 import okInput from '../ok-input/okinput.vue';
 export default {
  props: {},
  data() {
   return {
    number: {}
   };
  },
  methods: {
   handleAge(evt) {
    console.log(evt.target.value); // 接收从子组件传过来的当前对象
   }
  },
  components: {
   'ok-input': okInput
  }
 };
</script>

로그인 후 복사

// 하위 구성 요소.vue

<template>
 <p>
   <input v-model=&#39;numVal&#39; @blur=&#39;handleChange&#39;></input>
 </p>
</template>
<script type="text/ecmascript-6">
 import {Input, Select, Option, Button} from 'element-ui';
 import 'element-ui/lib/theme-default/index.css';
 export default {
  props: {
   params: {
    type: Object,
    default: {
     type: ''
    }
   },
   callback: {}
  },
  data() {
   return {
    x: 'hah',  
    numVal: ''
   };
  },
  methods: {
   handleChange(evt) {
    this.$emit('change', evt); // 将当前对象 evt 传递到父组件
   },
  },
  components: {
   'el-input': Input,
  }
 };
</script>

로그인 후 복사