Vueで値を渡すにはどのような方法がありますか? Vueでよく使われる値の受け渡しメソッドの紹介（3種類）-jsチュートリアル-php.cn

Vueで値を渡すにはどのような方法がありますか? Vueでよく使われる値の受け渡しメソッドの紹介（3種類）

不言

リリース： 2018-08-23 16:46:17

オリジナル

3799 人が閲覧しました

この記事でわかることは、Vue での値の転送方法とは何ですか? Vue でよく使われる値の転送方法 (3 種類) を紹介します。必要な方は参考にしていただければ幸いです。

1. 親コンポーネントが子コンポーネントに値を渡します
1. props を使用してデータチャネルを確立します

       // 这是父组件 
      <div id="app">
          // 这是子组件 
          <child message="hello" ></child>
      </div>

ログイン後にコピー

2. 子コンポーネントは、props を介して値を親コンポーネントに渡します

1。子コンポーネントのカスタムイベント

 Vue,component(&#39;child&#39;,{
     props:[&#39;message&#39;]
 })

ログイン後にコピー

2. 親コンポーネントの子タグはカスタムイベントをリッスンし、渡された値を取得します

Vue.component(&#39;child&#39;,{
    methods:{
        handleClick(){
        // 在相应该点击事件的函数使用$emit来触发一个自定义事件,并传递一个参数
            this.$emit(&#39;parentClick&#39;,123)
        }
    },
    template:`        <div>
            <h1>这是子组件</h1>
            <button @click="handleClick" >
                发送给父组件            </button>
        </div>
    `
})

ログイン後にコピー

3. 親コンポーネント以外のコンポーネントが値を渡す

場合によっては 2 つのコンポーネントも渡す必要があります。値 (非親子関係) ) なので、値の受け渡しと取得を行うには public vue が必要です

1. 空の vue を作成します

Vue.component(&#39;parent&#39;, {
    data() {
        return {
            msg: &#39;我是子组件&#39;
        }
    },
    methods: {
        receiveMsg(value) {
            console.log(value)
            this.msg = value
        }
    },
    template:&#39;        <div>
            <h1>这是子组件</h1>
            <p>接收子组件传过来的值{{msg}}</p>
            <child @parentClick=&#39;receiveMsg&#39;></child>
        </div>
    &#39;
})

ログイン後にコピー

2。コンポーネント 1 で、データを送信するための $emit を定義します

  // 创建一个空的公共的vue对象
    var bus = new Vue();

ログイン後にコピー

3. 渡されたデータを受け取るためにコンポーネント 2 $on で使用します

bus.$emit(&#39;test&#39;,&#39;数据&#39;)

ログイン後にコピー

もちろん、値の転送と取得に localstorage を使用することもできます。推奨事項:

Vue コンポーネント転送メソッド

vue は現在クリックされている要素を取得し、値を渡す方法

以上がVueで値を渡すにはどのような方法がありますか? Vueでよく使われる値の受け渡しメソッドの紹介（3種類）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。