Vue组件之间传值方式

Posted 2023-03-26

参考技术A

总结：
父组件想要向子组件传值，那么必然有一个地方是相互衔接的，意思就是我们要找到父组件与子组件之间的那个契合点。

契合点就是：子组件引入的地方

那么我们可以自定义一个属性来存放父组件向子组件传递的数据。

这样，父组件就把值传出去了，那么就回到子组件来接收这个值

到这里，子组件就拿到了父组件传递过来的值了
子组件使用该值

总结：
子组件向父组件传值，同样的他们之间的契合点也是子组件引入的地方。

首先来到子组件，用$emit发射数据

然后再来到父组件，在契合点的地方

这种组件之间的传值就有点麻烦了

思路：
1、干嘛要把数据写到子组件呢，直接写到父组件吧！
2、把子组件A的数据，先传到父组件，然后父组件，再传递给子组件B
3、定义一个空的vue实例化对象，用于出发和监听实例，相当于第三方

略

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