vueコンポーネント伝値(vueコンポーネント通信)のいくつかの方式

23227 ワード
vuex webフロントエンド vue
vueコンポーネント伝値(vueコンポーネント通信)のいくつかの方式
私たちはvueに触れた.js以降,コンポーネント化の開発は伝達値を用いざるを得ない.
一:親伝子(props)
具体的な実装:親コンポーネントはimportを介してサブコンポーネントを導入し、登録し、サブコンポーネントラベルに伝達する属性を追加し、サブコンポーネントはpropsを介して受信し、受信には2つの形式がある.1つは配列形式[‘受信する属性’]、2つはオブジェクト形式{}を介して受信し、オブジェクト形式は伝達するデータ型とデフォルト値を設定することができる.配列は単純な受信にすぎない.
1.1配列形式受信
親コンポーネントの表示:
<template>
  <div>
           ~       
    <son :title="this.title" />
  </div>
</template>

<script>
// @ is an alias to /src
import son from "../components/son";
export default {
  name: "Home",
  data: function() {
    return {
      title: "      "
    };
  },
  components: {
    son
  }
};
</script>

サブアセンブリの表示:
<template>
  <div>
          
    <br />
             ~=={{title}}
  </div>
</template>
<script>
export default {
  props: ["title"], //                  
  data() {
    return {};
  }
};
</script>
<style scoped>
</style>

1.2対象形式受信
親コンポーネント:
<template>
  <div>
           ~       
    <son :title="this.list" />
  </div>
</template>

<script>
// @ is an alias to /src
import son from "../components/son";
export default {
  name: "Home",
  data: function() {
    return {
      // title: "      ",
      list:[1,2,3,4]
    };
  },
  components: {
    son
  }
};
</script>

サブアセンブリ:
<template>
  <div>
          
    <br />
             ~==
    <div v-for="(item,index) in list" :key="index">
      {{item}}
    </div>
  </div>
</template>
<script>
export default {
  // props: ["title"], //                  
  data() {
    return {};
  },
  props:{
  list:{
    type:String,//       
    require:true//    ，                    ！！！
    default:'   '//    
  }
  }
};
</script>
<style scoped>
</style>

もう一つの問題は、サブコンポーネントの変更が親コンポーネントに同期できるかどうかです.もちろん、propの値を変更して、親コンポーネント-sync修飾子を更新することができます.
//    ：
<div:title.sync="{{title}}"></div>
//    ：         
this.$emit('update:title",'111')

二:子伝父($emit)
親コンポーネント:
<template>
  <div>
           ~       
    <son :title="this.list" @give="up" />
  </div>
</template>

<script>
// @ is an alias to /src
import son from "../components/son";
export default {
  name: "Home",
  data: function() {
    return {
      // title: "      ",
      list: [1, 2, 3, 4]
    };
  },
  components: {
    son
  },
  created: {},
  mounted() {},
  methods: {
    up(value) {
      console.log(value);
    }
  }
};
</script>

サブアセンブリ:
<template>
  <div>
          
    <!-- <br />         ~== -->
<button @click="giveDad">      </button>
    <!-- <div v-for="(item,index) in list" :key="index">{{item}}</div> -->
  </div>
</template>
<script>
export default {
  // props: ["title"], //                  
  data() {
    return {
      arr: [888, 999, 111, 222, 555]
    };
  },
  props: {
    list: {
      type: String
    }
  },
  methods:{
  //       
    giveDad(){
      this.$emit('give',this.arr)
      // console.log('111',this.arr)
    }
  }
};
</script>
<style scoped>
</style>

3:親コンポーネントで子コンポーネントを呼び出す方法:
ref:refがdom要素またはコンポーネント自体に名前を追加することで実現
例:
JSでthisを通ります.r e f s . 名前サブアクセス例:t h i s.refs.名前付きサブアクセス例:this.refs.名前付きサブアクセス例:this.refs.dialog
四:兄弟伝価
任意の2つのコンポーネントの値転送では、busクラスを作成して、イベントの配布、リスニング、コールバック管理を担当できます.
Vueプロジェクトでは、a.vueはb.vueに値を伝える必要があります.busを使用して値を伝える方法は以下の通りです.1)busを確立します.jsファイルjsファイル、次のコードを書き込みます.


// bus.js
import Vue from 'vue'
export default new Vue()

2)a.vueにコードを追加
//      bus，          
import Bus from '../../api/bus'

beforeDestroy(){
   Bus.$emit('val',      )
   console.log('      ');      
},

3)b.vueにコードを追加
import Bus from '../../api/bus'
		
created(){
   //  $on       
   Bus.$on('val', (data) => {
     console.log(data)  
   })
}

今日は皆さんと分かち合いましょう.
Vee:迅速に移植できるエンジニアリング構造
Vueのピット登りの旅--ポスターを動的に合成して共有する際に注意しなければならないいくつかの問題