vue의 하위 구성 요소에 여러 데이터를 전달하기 위해 상위 구성 요소를 구현하는 방법

아래에서는 Vue 상위 구성 요소에서 하위 구성 요소로 여러 데이터를 전달하는 예를 공유하겠습니다. 이는 좋은 참조 값을 가지며 모든 사람에게 도움이 되기를 바랍니다.

일반적으로 VUE 구성 요소를 사용할 때 상위 구성 요소에서 하위 구성 요소로 특정 데이터를 전달해야 하는 경우가 많습니다. 이때 일반적으로 두 가지 상황이 있습니다.

첫 번째 유형: static 데이터 전송: 문자열 전송

두 번째 유형: 동적 데이터 전송: 문자열을 바인딩하고 이를 전달하거나 배열 또는 객체

여기서는 주로 동적 데이터 바인딩을 살펴봅니다. 예를 들어, 필요한 모든 데이터를 배열이나 객체로 캡슐화하여 하위 구성 요소에 전달할 수 있습니다.

하지만 질문이 있습니다. 객체와 배열이라는 두 개의 데이터가 동시에 상위 구성 요소에서 하위 구성 요소로 전달되어야 한다면 어떻게 하시겠습니까?

다음은 설명하는 예입니다.

하위 구성 요소의 JS

/**
 * 收货地址组件 马优晨
 **/
define(function(require, exports, module){
 var $ = require("lib_cmd/zepto-cmd"),
  Vue = require('lib_cmd/vue-cmd'),
  main = require("js_cmd/main-cmd"),
 var vm= Vue.component('myaddress', {
  template: '\
  <p data-role="data-widget" data-widget="address-editor" class="address_mask" id="address-editor">\
  </p>&#39;,
  props:["address","ids"],
  methods: {
  },
  created: function () {
  }
 });
 module.export= vm;
})
/*注册名为“myaddress”的组件 ，从父组件传递过来两个数据"address","ids"*/

상위 구성 요소 EJS 페이지

<%- include ../../header %>
<link href="/css/vd/activity/myAward.css?v=<%= config.version %>" rel="external nofollow" rel="stylesheet" />
<p data-role="container" class="body <%= pageName %>" id="myAward">
 <myaddress :address="editAddr" :ids="ids"></myaddress>
</p>
 <script>
  seajs.use(&#39;js_cmd/vd/activity/myAward-cmd&#39;);
 </script>
<%- include ../../footer %>
/*在定义的组件 “myaddress”中绑定两个父组件的数据 "editAddr" "ids"*/

상위 구성 요소의 JS 페이지

/**
 * Created by youchen.ma on 2017/6/21.
 */
define(function (require, exports, module) {
 var $ = require("lib_cmd/zepto-cmd"),
  Vue = require("lib_cmd/vue-cmd"),
  main = require("js_cmd/main-cmd"),
  Address = require('js_cmd/vd/venue/widget/venueEditAddress-cmd') //引入子组件的JS文件
  var vm = new Vue({
  el: '#myAward',
  data:{ 
   editAddr:{},  
   ids:""    
   }
  })
})

위에서 편집했습니다 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Vuex를 사용하여 메모 작성 애플리케이션을 구현하는 방법

일반적으로 사용되는 Axios 요청 메서드 별칭을 기반으로 함(자세한 설명)

Bootstrap의 데이터-[*] 속성 구성

위 내용은 vue의 하위 구성 요소에 여러 데이터를 전달하기 위해 상위 구성 요소를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!