vue组件传值大全

想了解vue组件传值有那些方法吗？大家请往下看，我会给大家总结一下，方便大家参考学习，共同进步。

一.父传子 子传父

我给大家总结下父传子，如何传递的。

父传递子如何传递
（1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量
（2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性 名”] props:{属性名:数据类型}

子传递父如何传递
（1）在父组件的子组件标签上自定义一个事件，然后调用需要的方法
（2）在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件，数据是以参数的形式进行传递的

代码如下

父组件代码

<template>
  <div class="father">
      <!-- 引入子组件 -->
      <Child :Msg="Mesage"></Child>
  </div>
</template>
<script>
  //导入子组件文件位置
  import Child from '@/components/Child.vue' 
  export default{
      //添加子组件
     components: {
         Child
      },
      data(){
         return{
          
     Mesage:'我是父亲棒棒的' 
             
             
         }
      }
  }
</script>


<style scoped>
</style>

子组件代码

<template>
  <div class="son">
      <!-- 大家好，我是儿子组件 -->
      <span>{{Msg}}</span>
  </div>
</template>
<script>
  export default{
  	props: [
  
  	   'Msg'
      ],
  	methods: {
  	   
  	}
  }
</script>

兄弟组件如何通信

（1）在src中新建一个Bus.js的文件，然后导出一个空的vue实例
（2）在传输数据的一方引入Bus.js 然后通过Bus.$emit(“事件名”,"参数")来来派发事件，数据是以$emit()的参数形式来传递
（3）在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})

在src中新建一个Bus.js的文件，然后导出一个空的vue实例
定义一个点击按钮，点击发送组件B里的数据
在传输数据的一方引入Bus.js  然后通过Bus.$emit(“事件名”,"参数")来来派发事件，数据是以$emit()的参数形式来传递
<template>
  <div class="A">
    <button @click="add">A按钮</button>
  </div>
</template>
 
<script>
import bus from "../bus/bus";
export default {
  props: [],
  data() {
    return {
      msg: "我是组件A的数据",
    };
  },
  mounted() {},
  methods: {
    add() {
      bus.$emit("add", this.msg);
    },
  },
};
</script>

在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on("事件名",(data)=>{data是接受的数据})
<template>
  <div class="B">
    B组件
    <h3>{{ data }}</h3>
  </div>
</template>
 
<script>
import bus from "../bus/bus";
export default {
  props: [],
  data() {
    return {
      data: "",
    };
  },
  mounted() {
    bus.$on("add", (data) => {
      this.data = data;
    });
  },
  methods: {},
  computed: {},
  components: {},
  watch: {},
};
</script>

二.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,
      });

三.全局变量

在src中首先创建一个Global.js文件，文件中定义变量

全局变量创建最好是对象
exports.install = function (Vue) {
    Vue.prototype.$allArray = {};
};

在src中的main.js文件中引入

导入并使用全局方法和变量
import Global from './Global';
Vue.use(Global);

四.ref/refs（父子组件通信）

（1）ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，

（2）可以通过实例直接调用组件的方法或访问数据。也算是子组件向父组件传值的一种

父组件

<template>
  <div>
    <button @click="sayHello">sayHello</button>
    <child ref="childForRef"></child>
  </div>
</template>
<script>
import child from './child.vue'
  export default {
    components: { child },
    data () {
      return {
        childForRef: null,
      }
    },
    mounted() {
      this.childForRef = this.$refs.childForRef;
      console.log(this.childForRef.name);
    },
    methods: {
      sayHello() {
        this.childForRef.sayHello()
      }
    }
  }
</script>

子组件

<template>
  <div>child 的内容</div>
</template>
<script>
export default {
  data () {
    return {
      name: '我是 child',
    }
  },
  methods: {
    sayHello () {
      console.log('hello');
      alert('hello');
    }
  }
}
</script>

五.路由传参 query

就是在跳转路由是在url路径后面加上?=‘参数’来传递参数，然后可以用this.route.query.(参数)来接收就行或者监听路由来获取;

还可以在方法中用：

方法名（）{
 this.$router.push({ path: "/goods", query: { productID: list } });
 }

在组件中用
 mounted(){
 //挂载时   接收一下
  var id = this.$route.query.productID;
  }