vue

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. 效果图如下：

本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可。本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。最后编辑时间为: 2021/12/30 01:54