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

不言
リリース: 2018-08-23 16:46:17
オリジナル
3773 人が閲覧しました

この記事でわかることは、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 サイトの他の関連記事を参照してください。

関連ラベル:
vue
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!