[解決済み] vue.jsのコンポーネントへのデータの渡し方

質問

vue.jsのコンポーネント間でデータを受け渡す方法を理解するのに苦労しています。 私は何度もドキュメントを読み、多くのvue関連の質問とチュートリアルを見ましたが、私はまだそれを得ることができません。

私の頭を包むために、私は非常に簡単な例を完了する手助けを期待しています。

1. 1 つのコンポーネントでユーザーのリストを表示する (完了)
2. リンクがクリックされたときに新しいコンポーネントにユーザーデータを送信する (完了) - 下部の更新を参照。
3. ユーザーデータを編集し、元のコンポーネントに送り返す（ここまではできていない）

以下は、ステップ2で失敗するフィドルです。 https://jsfiddle.net/retrogradeMT/d1a8hps0/

新しいコンポーネントにデータを渡すためにpropsを使用する必要があることは理解していますが、機能的にどのようにそれを行うのかがわかりません。新しいコンポーネントにデータをバインドするにはどうすればよいのでしょうか？

HTMLです。

    <div id="page-content">
       <router-view></router-view>
     </div>

 <template id="userBlock" >
   <ul>
     <li v-for="user in users">{{user.name}} - <a v-link="{ path: '/new' }"> Show new component</a>
     </li>
   </ul>
 </template>

  <template id="newtemp" :name ="{{user.name}}">
    <form>
      <label>Name: </label><input v-model="name">
      <input type="submit" value="Submit">
    </form>
  </template>

メインコンポーネントのjs。

Vue.component('app-page', {
  template: '#userBlock',

  data: function() {
    return{

        users: []
      }
    },

ready: function () {
    this.fetchUsers();
},

methods: {
    fetchUsers: function(){
        var users = [
          {
            id: 1,
            name: 'tom'
          },
          {
            id: 2,
            name: 'brian'
          },
          {
            id: 3,
            name: 'sam'
          },
        ];

        this.$set('users', users);
     }
    }
  })

2つ目のコンポーネントのJSです。

Vue.component('newtemp', {
  template: '#newtemp',
  props: 'name',
  data: function() {
    return {
        name: name,
        }
   },
})

アップデイト

OK、2番目のステップを理解しました。以下はその経過を示す新しいフィドルです。 https://jsfiddle.net/retrogradeMT/9pffnmjp/

Vue-routerを使用しているので、データを新しいコンポーネントに送信するためにpropsを使用するわけではありません。 その代わり、v-linkにparamsを設定し、それを受け入れるためにtransition hookを使用する必要があります。

V-linkの変更 vue-routerのドキュメントにあるnamed routesを参照してください。 :

<a v-link="{ name: 'new', params: { name: user.name }}"> Show new component</a>

次に、コンポーネント上で、ルートオプションにデータを追加します。 トランジションフックを見る :

Vue.component('newtemp', {
  template: '#newtemp',
  route: {
   data: function(transition) {
        transition.next({
            // saving the id which is passed in url
            name: transition.to.params.name
        });
     }
  },
 data: function() {
    return {
        name:name,
        }
   },
})

どのように解決するのですか？

-------------以下はVue1のみ適用可能です。

データの受け渡しは、複数の方法で行うことができます。使用する種類によって方法が異なります。

新しいコンポーネントを追加している間に、htmlからデータを渡したい場合。それはpropsを使って行います。

<my-component prop-name="value"></my-component>

このプロップの値は、プロップ名 prop-name を props 属性に追加します。

何らかの動的または静的なイベントにより、コンポーネントから別のコンポーネントにデータが渡される場合。これは、イベント ディスパッチャとブロードキャスタを使用することで行われます。例えば、このようなコンポーネント構造を持っているとします。

<my-parent>
    <my-child-A></my-child-A>
    <my-child-B></my-child-B>
</my-parent>

そして、データを <my-child-A> から <my-child-B> で、次に <my-child-A> で、イベントをディスパッチする必要があります。

this.$dispatch('event_name', data);

このイベントは、親チェーンの上まで移動します。そして、どの親からでも <my-child-B> への分岐がある場合、データとともにイベントをブロードキャストします。つまり、親では

events:{
    'event_name' : function(data){
        this.$broadcast('event_name', data);
    },

さて、このブロードキャストは子チェーンを下っていきます。そして、イベントを取得したい子プロセスで、この例では <my-child-B> で、別のイベントを追加します。

events: {
    'event_name' : function(data){
        // Your code. 
    },
},

データを渡す3つ目の方法は、v-linkのパラメータを使用することです。この方法は、コンポーネントチェーンが完全に破壊されたとき、またはURIが変更されたときに使用されます。そして、あなたはすでにそれらを理解していることがわかります。

どのようなデータ通信をしたいのかを決め、適切に選択する。