vue最全组件传值

1. 父传子

父组件是通过props属性给子组件通信的
父组件代码如下：

 <template>
   <div class="parent">
     <h2>{{ msg }}</h2>
     <son :msg="msg"></son> 
 </div>
 </template>
 <script>
 import son from './son' //引入子组件
 export default {
   name: 'HelloWorld',
   data () {
     return {
       msg: '父组件',
     }
   },
   components:{son},
 }
 </script>

子组件代码如下：

 <template>
   <div class="son">
     <p>{{ sonMsg }}</p>
     <p>子组件接收到内容：{{ faMsg }}</p>
   </div>
 </template>
 <script>
 export default {
   name: "son",
   data(){
     return {
       sonMsg:'子组件',
     }
   },
   props:['faMsg'],
 }
</script>

2. 子传父

通过绑定事件然后用$emit传值
父组件代码如下：

 <template>
   <div class="parent">
     <h2>{{ msg }}</h2>
     <p>父组件接手到的内容：{{ username }}</p>
     <son psMsg="我是你爸爸" @transfer="getUser"></son> 
      <!-- 监听子组件触发的transfer事件,然后调用getUser方法 -->
   </div>
 </template>
 <script>
 import son from './Son'
 export default {
   name: 'HelloWorld',
   data () {
     return {
       msg: '父组件',
       username:'',
     }
   },
   components:{son},
   methods:{
     getUser(msg){
       this.username= msg
     }
   }
 }
 </script>

子组件代码如下：

 <template>
   <div class="son">
     <p>{{ sonMsg }}</p>
     <p>子组件接收到内容：{{ psMsg }}</p>
     <!--<input type="text" v-model="user" @change="setUser">-->
     <button @click="setUser">传值</button>
   </div>
 </template>
 <script>
 export default {
   name: "son",
   data(){
     return {
       sonMsg:'子组件',
       user:'子传父的内容'
     }
   },
   props:['psMsg'],
   methods:{
     setUser:function(){
       this.$emit('transfer',this.user)//触发transfer方法，this.user 为向父组件传递的数据
     }
   }
 }
 </script>

3. 兄弟传兄弟

通过bus总线传递
main.js代码如下：

window.$bus=new Vue();

第一个页面：

<template>
   <button @click="sendMsg()">-</button>
</template>

<script> 
//import $bus from "../bus.js";
export default {
 methods: {
   sendMsg() {
     $bus.$emit("aMsg", '来自第一个页面的消息');
   }
 }
}; 
</script>

第二个页面：

<template>
 <p>{{msg}}</p>
</template>

<script> 
//import $bus  from "../bus.js";
export default {
 data(){
   return {
     msg: ''
   }
 },
 mounted() {
   $bus.$on("aMsg", (msg) => {
     // 第一个页面发送来的消息
     this.msg = msg;
   });
 }
};
</script>

4.$ref

被用来给元素或子组件注册引用信息
父组件代码如下：

<template>
  <div>
    <h1>我是父组件！</h1>
    <child ref="msg"></child>
  </div>
</template>

<script>
  import Child from '../components/child.vue'
  export default {
    components: {Child},
    mounted: function () {
      console.log( this.$refs.msg);
      this.$refs.msg.getMessage('我是子组件一！')
    }
  }
</script>

子组件代码如下：

<template>
  <h3>{{message}}</h3>
</template>
<script>
  export default {
    data(){
      return{
        message:''
      }
    },
    methods:{
      getMessage(m){
        this.message=m;
      }
    }
  }
</script>

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.路由传参

<li v-for="article in articles" @click="getDescribe(article.id)">
//在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();