Vue 兄弟コンポーネントで値を渡す 5 つの方法は何ですか?

5 つのメソッドは次のとおりです: 1. 親コンポーネントが子コンポーネントに値を渡す; 2. 子コンポーネントが親コンポーネントに値を渡す; 3. 親コンポーネントのラベルにカスタム イベントを定義するパラメータ; 4. サブコンポーネントでカスタム イベントをトリガーし、パラメータを渡す; 5. パブリック コンポーネント Bus.js を通じてパラメータを渡す。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

vue コンポーネントで値を渡す 5 つの方法:

1. 親コンポーネントがサブコンポーネントに値を渡す:

親データ​​をサブコンポーネントにバインドし、サブコンポーネントは props にパラメータを渡します。

次に、例を使用して、親コンポーネントが子コンポーネントに値を転送する方法を説明します。親コンポーネント App.vue のデータを子コンポーネント Users.vue ユーザーで取得する方法:[ "Henry","Bucky" ,"Emily"]

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: &#39;App&#39;,
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}

//users子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;HelloWorld&#39;,
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }
}
</script>

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

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

次に、例を使用して、サブコンポーネントが親コンポーネントに値を渡す方法を説明します。「Vue.js デモ」をクリックすると、サブコンポーネントは値を渡します。親コンポーネントに値を渡すと、元の「値を渡す」から文字が変わり、「子が親コンポーネントに値を渡す」となり、子コンポーネントから親コンポーネントへの値の受け渡しを実現します。

// 子组件
<template>
  <header>
    <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
  </header>
</template>
<script>
export default {
  name: &#39;app-header&#39;,
  data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”
    }
  }
}
</script>

// 父组件
<template>
  <div id="app">
    <app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致
   // updateTitle($event)接受传递过来的文字
    <h2>{{title}}</h2>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: &#39;App&#39;,
  data(){
    return{
      title:"传递的是一个值"
    }
  },
  methods:{
    updateTitle(e){   //声明这个函数
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

3. 親コンポーネントのラベルにカスタム イベントを定義し、イベント内のパラメーターを取得します。

4. カスタム イベントをトリガーします。子コンポーネントのイベントとパラメータを渡します。 (this.$ Emit('親コンポーネントのカスタム イベント',parameters))

5. パブリック コンポーネント Bus.js を通じてパラメーターを渡します

[関連する推奨事項: "vue. js チュートリアル >>]

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