vue最全コンポーネント伝値

1.親伝子
親コンポーネントは、propsプロパティを使用してサブコンポーネントに通信する親コンポーネントコードです.

 
 
 import son from './son' //     
 export default {
   name: 'HelloWorld',
   data () {
     return {
       msg: '   ',
     }
   },
   components:{son},
 }
 

サブアセンブリコードは次のとおりです.

 
 
 export default {
   name: "son",
   data(){
     return {
       sonMsg:'   ',
     }
   },
   props:['faMsg'],
 }

2.子から父へ
イベントをバインドし、$emitで親コンポーネントコードを次のように送信します.

 
 
 import son from './Son'
 export default {
   name: 'HelloWorld',
   data () {
     return {
       msg: '   ',
       username:'',
     }
   },
   components:{son},
   methods:{
     getUser(msg){
       this.username= msg
     }
   }
 }
 

サブアセンブリコードは次のとおりです.

 
 
 export default {
   name: "son",
   data(){
     return {
       sonMsg:'   ',
       user:'      '
     }
   },
   props:['psMsg'],
   methods:{
     setUser:function(){
       this.$emit('transfer',this.user)//  transfer  ，this.user           
     }
   }
 }
 

3.兄弟伝兄弟
busバスでmainを渡す.jsコードは以下の通りです.

window.$bus=new Vue();

最初のページ:

 
//import $bus from "../bus.js";
export default {
 methods: {
   sendMsg() {
     $bus.$emit("aMsg", '          ');
   }
 }
}; 

2ページ目:

 
//import $bus  from "../bus.js";
export default {
 data(){
   return {
     msg: ''
   }
 },
 mounted() {
   $bus.$on("aMsg", (msg) => {
     //            
     this.msg = msg;
   });
 }
};

4.$ref
要素またはサブコンポーネントに参照情報を登録するために使用される親コンポーネントコードは、次のとおりです.

  import Child from '../components/child.vue'
  export default {
    components: {Child},
    mounted: function () {
      console.log( this.$refs.msg);
      this.$refs.msg.getMessage('      ！')
    }
  }

サブアセンブリコードは次のとおりです.

  export default {
    data(){
      return{
        message:''
      }
    },
    methods:{
      getMessage(m){
        this.message=m;
      }
    }
  }

5.vuex
storeを通るcommitはvuexに値を入力、vuexはmutationsによってstore/indexを受信する.jsには、次のコードが書き込まれます.

 state: {
    userName:''
  },
  mutations: {
    user(state,name){
      state.userName=name;
    },
    }

コンポーネントに次のコードを書き込む:store.commit(‘メソッド名’,‘パラメータ’)

      this.$store.commit("user", {
        userName: res.user.userName,
        id: res.user.user_id,
      });

6.ルーティングパラメータ

// methods     
      getDescribe(id) {
//       $router.push          
        this.$router.push({
          path: `/describe/${id}`,
        })
        //        
       {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

7.グローバル変数
srcでまずGlobalを作成します.jsファイル、ファイル定義変数

//           
exports.install = function (Vue) {
    Vue.prototype.$allArray = {};
};

srcのmain.jsファイルへの導入

//            
import Global from './Global';
Vue.use(Global);

コンポーネントで使用する場合

//             
this.$allArray.arr= this.categoryArr;

//              
 console.log(this.$allArray.arr);

8.promise
promiseは非同期を扱う利器です

//       ，              
promise = new Promise((resolve,reject)=>{
    let a = 1
    let b = 2
    let c = 3
    resolve(a,b,c) 
})
promise.then((a,b,c)=>{
    console.log(a,b,c)
})

9.sessionStorage送信
sessionStorageはブラウザのグローバルオブジェクトであり、その中に存在するデータはページが閉じたときに消去されます.この機能を使用すると、すべてのページでデータを共有することができます.

//       sessionStorage
sessionStorage.setItem('key', 'value');

//   sessionStorage     
let data = sessionStorage.getItem('key');

//   sessionStorage        
sessionStorage.removeItem('key');

//   sessionStorage          
sessionStorage.clear();