本文主要是介绍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>
4.效果图如下:
这篇关于vue组件之间传值方式 vue父子组件传值传参方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!