Vueで複数のデータを子コンポーネントに渡す親コンポーネントを実装する方法

以下に、Vue の親コンポーネントから子コンポーネントに複数のデータを渡す例を紹介します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

通常、VUE コンポーネントを使用する場合、親コンポーネントから子コンポーネントに特定のデータを渡す必要があることがよくあります。このとき、主に 2 つのメソッドがあります:

最初のタイプ: static。データ転送: 文字列を転送します

2 番目のタイプ: 動的データ転送: 文字列をバインドして、配列、またはオブジェクトに渡します

ここでは主にダイナミクス データ バインディングを見ていきます。たとえば、必要なすべてのデータを配列またはオブジェクトにカプセル化し、それをサブコンポーネントに渡すことができます。

しかし、疑問があります。オブジェクトと配列という 2 つのデータを、親コンポーネントから子コンポーネントに同時に渡す必要がある場合はどうしますか?

これを説明する例を示します:

子コンポーネントの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におけるdata-[*]属性の整理

以上がVueで複数のデータを子コンポーネントに渡す親コンポーネントを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。