vue의 하위 구성 요소에 여러 데이터를 전달하기 위해 상위 구성 요소를 구현하는 방법-JS 튜토리얼-php.cn

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

亚连

풀어 주다： 2018-06-02 14:32:55

원래의

5303명이 탐색했습니다.

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

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

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

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

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

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

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

하위 구성 요소의 JS

/**
 * 收货地址组件 马优晨
 **/
define(function(require, exports, module){
 var $ = require("lib_cmd/zepto-cmd"),
  Vue = require(&#39;lib_cmd/vue-cmd&#39;),
  main = require("js_cmd/main-cmd"),
 var vm= Vue.component(&#39;myaddress&#39;, {
  template: &#39;\
  <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(&#39;js_cmd/vd/venue/widget/venueEditAddress-cmd&#39;) //引入子组件的JS文件
  var vm = new Vue({
  el: &#39;#myAward&#39;,
  data:{ 
   editAddr:{},  
   ids:""    
   }
  })
})

로그인 후 복사

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