vue组件之间传值方式 vue父子组件传值传参方法

本文主要是介绍vue组件之间传值方式 vue父子组件传值传参方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

https://www.cnblogs.com/lingdu87/p/9147555.html

vue组件之间传值方式解析
一.父组件传到子组件 1.父组件parent代码如下：

<template><div class="parent"><h2>{{ msg }}</h2><son psMsg="父传子的内容:叫爸爸"></son> <!-- 子组件绑定psMsg变量--></div></template><script>import son from './Son' //引入子组件export default {name: 'HelloWorld',data () {return {msg: '父组件',}},components:{son},}</script>

  2.子组件son代码如下：

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

  3.效果图如下：

二.子组件向父组件传值通过绑定事件然后及$emit传值1.父组件parent代码如下

<template><div class="parent"><h2>{{ msg }}</h2><p>父组件接手到的内容：{{ username }}</p><son psMsg="父传子的内容:叫爸爸" @transfer="getUser"></son>  <!--绑定自定义事件transfer--></div></template><script>import son from './Son'export default {name: 'HelloWorld',data () {return {msg: '父组件',username:'',}},components:{son},methods:{getUser(msg){this.username= msg}}}</script>

  2.子组件son代码如下：

<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上传递过去}}}</script>

  3.效果图如下：

三、通过Vuex状态管理传值 1.通过npm加载vuex，创建store.js文件，然后在main.js中引入，store.js文件代码如下：import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);const state = {author:'Wise Wang'};const mutations = {newAuthor(state,msg){state.author = msg}}export default  new Vuex.Store({state,mutations})2.父组件parent代码如下：

<template><div class="parent"><h2>{{ msg }}</h2><p>父组件接手到的内容：{{ username }}</p><input type="text" v-model="inputTxt"><button @click="setAuthor">传参</button><son psMsg="父传子的内容:叫爸爸" @transfer="getUser"></son></div></template><script>import son from './Son'export default {name: 'HelloWorld',data () {return {msg: '父组件',username:'',inputTxt:''}},components:{son},methods:{getUser(msg){this.username= msg},setAuthor:function () {this.$store.commit('newAuthor',this.inputTxt)}}}</script>

  3.子组件son代码如下：

<template><div class="son"><p>{{ sonMsg }}</p><p>子组件接收到内容：{{ psMsg }}</p><p>这本书的作者是：{{ $store.state.author }}</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)}}}</script>