vueで子コンポーネントにデータを渡す親コンポーネントを実装する方法-jsチュートリアル-php.cn

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

亚连

リリース： 2018-06-14 13:51:52

オリジナル

2746 人が閲覧しました

この記事では、Vueの親コンポーネントから子コンポーネント(props)にデータを渡す方法を中心に紹介しており、Vueの親コンポーネントと子コンポーネント間の値の受け渡し(props)の実装コードも紹介していますので、必要な方は参考にしてください。

Vue ページ構造

プロジェクトに取り組んでいるとき、特定のデータの詳細をクエリするために、このページ上のデータ (ID 番号など) を別のページに移動する必要がある状況がよくあります。従来のアプローチはURLに入れるのではなく、現在のH5の「sessionStorage」と「localStorage」にパラメータやCookieを追加したり、値を割り当てたりする方法です。

Angularjs、React、Vue などの人気のあるコンポーネントベースの開発手法により、これも優れたソリューションになりました。

最近何人かの友人が、Vue コンポーネント間でパラメーターがどのように渡されるのかを尋ねました。実際、Vue にはコンポーネント間でデータを転送する方法が 3 つあります (props、コンポーネント通信、スロット)。今回は 1 つ目の方法は次のとおりです:

a 親コンポーネントのコンテンツ:

b サブコンポーネントのインポート b フォームの導入。 ' b.vue'

components: {&#39;b-p&#39;: b} // 注册，只能在当前a组件里使用
<b-p :propsname=&#39;datas(向子组件传递的参数)&#39;></b-p>

ログイン後にコピー

B サブコンポーネントの内容:

<template> <p>{{propsname}}</p> </template>
export default{
props: [&#39;propsname&#39;],
data(){}
}

ログイン後にコピー

a コンポーネント内のデータの値が変化し続ける限り、b サブコンポーネント内の props はリアルタイムで propsname の変更を監視し、応答します。それに応じて、ページ上のレンダリング方法も {{propsname}} になります。

追記: Vueの親コンポーネントと子コンポーネント間で値(props)を渡す方法を紹介します

まず子コンポーネントを定義し、コンポーネントにpropsを登録します

<template>
  <p>
    <p>{{message}}(子组件)</p>
  </p>
</template>
<script>
export default {
  props: {
    message: String //定义传值的类型<br>  }
}
</script>
<style>
</style>

ログイン後にコピー

親コンポーネントに、子コンポーネントに必要な値を渡します

<template>
  <p>
    <p>父组件</p>
    <child :message="parentMsg"></child> 
  </p>
</template>
<script>
import child from &#39;./child&#39; //引入child组件
export default {
  data() {
      return {
        parentMsg: &#39;a message from parent&#39; //在data中定义需要传入的值
      }
    },
    components: {
      child
    }
}
</script>
<style>
</style>

ログイン後にコピー

このメソッドは親から子にのみ渡すことができます

子コンポーネントは親コンポーネントのデータを更新できません

上記は私が行ったものです。将来すべての人に役立つことを願っています。

layui での値の受け渡しに関する質問

JavaScript を使用して宝くじシステムを実装する方法

詳細な回答 vue の変更はコンポーネントにどのような影響を与えますか?

Parcelを使用した梱包方法

🎜

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