vueコンポーネントに値を渡す方法は何ですか?

コンポーネント値の転送方法: 1. ルーティングを通じて値を渡す; 2. 親コンポーネント内のサブコンポーネントのラベルを親コンポーネントのデータにバインドすることで、サブコンポーネントの props が値を受け取ります親コンポーネントによって渡される。コンポーネントの props は、親コンポーネントによって渡される値を受け取ります。3. 子コンポーネントが値を親コンポーネントに渡すとき、「this.$emit」を使用して getData イベントをトラバースします。4.親以外のコンポーネント間で値を渡す、バインディング「this.on」イベント、「this.$emit」イベントをトリガーする、またはローカル ストレージにパブリック データを追加する（両方のページで取得可能）

##vue コンポーネントから値を渡す方法:

1. ルーティング用のパラメーターを渡す

手順:

①ルート定義時とルーティングパス定義時にパラメーター props: true を追加します。 パラメーターのプレースホルダーがあるはずです: name『Usage: to="'path/'+value"』

②ジャンプ先のページにパラメータprops:['name']

##を追加 #③ジャンプ先のページで名前を取得「使い方:直接これ。jsで名前; htmlで直接補間{{名前}}」 "

2. 親コンポーネントは子コンポーネントに値を渡します。

親コンポーネントは、子コンポーネント タグに親コンポーネントのデータをバインドさせることで、子コンポーネントに値を渡します。子コンポーネントのプロパティは親コンポーネントから渡された値を受け取ります。

手順：

①親コンポーネント『data(){』に転送するデータを設定します。 parentid:value}』

②親コンポーネント内で参照されている子コンポーネントにカスタム属性をバインドして配置します。 データはカスタム属性「 mybtn>」にバインドされます;"

##③パラメータ props:['childid'] をサブコンポーネントに追加します。これで完了です

コード:

<div id="app"><br/>    <mybtn :childid=&#39;parentid&#39; title="我是标题"></mybtn><br/></div><br/><script><br/>    new Vue({<br/>        el:"app",<br/>        data:{<br/>            parentid:"88888"<br/>        },<br/>        components:{<br/>            "mybtn" : {<br/>                props: [&#39;childid&#39;,&#39;title&#39;],<br/>                template: &#39;<button>我是{{childid}}号按钮{{title}}</button>&#39;<br/>            }<br/>        }<br/>    })<br/></script><br/>

結果表示:

#3. 子コンポーネントは親コンポーネントに値を渡します

子コンポーネントは親の値を渡します実装方法は、getData イベントをトラバースするために this.e m i t を使用することです。ボタンをクリックして setData イベントをトリガーし、setData で this.emit を使用して getData イベントをトラバースし、最後に this.msg

Steps:

##①親コンポーネントにはパラメーターが必要なので、カスタム イベントを定義します親コンポーネントのラベルでイベント内のパラメータを取得します; "@myEvent=" callback" はコールバック関数でパラメータを受け取ります"

#②サブコンポーネントでカスタム イベントをトリガーし、パラメータを渡します。 『this.$emit('親コンポーネントのカスタムイベント',parameters)』

コード:

<template><br/>  <div><br/>      <mybtn :  style="max-width:90%" @changeColorEvent="getColor" :parentid="childid" title="我是标题"></mybtn><br/>  </div><br/> <br/></template><br/><script><br/> <br/>  export default {<br/>    name : &#39;test&#39;,<br/>    data () {<br/>      return {<br/>        childid:"666",<br/>        acolor:&#39;blue&#39;,<br/>        bcolor:&#39;red&#39;<br/>      }<br/>    },<br/>    methods:{<br/>      getColor(colors){<br/>        //父组件就可以拿到子组件传过来的colors<br/>        console.log(colors)<br/>        this.acolor = "white";<br/>        this.bcolor = colors;<br/>      },<br/>      //接收多个参数<br/>      /*getColor(colors1,colors2){<br/>        console.log(colors1,colors2)<br/>        this.acolor = colors2;<br/>        this.bcolor = colors1;<br/>      }*/<br/>    },<br/>    components: {<br/>      &#39;mybtn&#39; : {<br/>        props : [&#39;parentid&#39;,&#39;title&#39;],<br/>        template : `<br/>          <div class="box"><br/>            <p>我最初是一张白纸</p><br/>            <button @click="changeColor">我是{{parentid}}号按钮{{title}}</button><br/>          </div><br/>        `,<br/>        methods: {<br/>          changeColor(){<br/>          //这个方法是触发父组件中的事件，第一个参数是触发的事件名称。第二个参数及以后是向changeColorEvent传的参数<br/>           this.$emit(&#39;changeColorEvent&#39;,"orange")<br/>           //发送多个参数可以直接跟在后面<br/>           //this.$emit(&#39;changeColorEvent&#39;,"orange","white")<br/>          }<br/>        }<br/>      }<br/>    }<br/>  }<br/></script><br/><style scoped><br/> <br/></style><br/>

4. 親コンポーネント以外のコンポーネント間での値の受け渡し

手順:

(1)方法1,

①パブリック通信コンポーネント(Vue)を作成し、値を渡す必要のあるコンポーネントに通信コンポーネントを導入します

②イベントを 1 つのコンポーネントにバインドする this.on('eventname', this.id)

③別のコンポーネントでイベントをトリガーする this.$ Emit('eventname',( options )=>{} )

(2) 方法 2、

2 ページで取得できる公開データをローカル ストレージに追加します、変更

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