组件之间的数据传递

父子组件之间数据传递，不相关组件之间数据传递

😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍
一、父组件向子组件传递数据

在 Vue 中，可以使用 props 向子组件传递数据。

import HelloWorld from './components/HelloWorld.vue'

显然目前的app.vue是Hellow的父组件
通过prop从父组件获取值

//子组件helloworld.vue,通过props接收父组件传来的head值
<template>
  <div>
     {{text}} + {{head}}
  </div>
</template>

<script>
export default {
    data(){
        return {
            text:'父组件的内容是'
        }
        
    },
    props: ['head']
}
</script>

//父组件app.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App" :head="headMsg" />
    //通过v-bind绑定可以动态更改数据
    hellow world
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  data() {
    return {
      headMsg : '父标题'
      //head内容
    }
  },
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊

父组件从子组件获取数据

子组件主要通过事件传递数据给父组件
子组件可以使用 $emit 触发父组件的自定义

比如登陆是一个子组件，父组件要获取输入的用户名数据（实现原理：子组件定义事件，当事件触发时候紧接着触发内部$emit( eventName, […args] )函数，中转到父组件进行执行，args作为参数传递）

举例

//login.vue代码
<template>
  <div class="main">
      <span>用户名</span>
      <input v-model="username" @change="setUser" type="text">
  </div>
</template>

<script>
export default {
    data(){
        return {
            username:'boker'
        }
    },
    methods: {
        setUser:function(){
            this.$emit('methodName_sonGive',this.username)
        }
    }
}
</script>

<style>

</style>

login定义事件通过$emit把事件传递给父组件

//父组件app.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App" :head="headMsg" />
    <login @methodName_sonGive='getUser_father' />
   <p>
     {{user}}
   </p>
   
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import login from './components/login'
export default {
  name: 'app',
  data() {
    return {
      headMsg : '父标题',
      user : ''
    }
  },
  components: {
    HelloWorld,
    login
  },
  methods: {
    getUser_father(msg) {
      this.user = msg
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<login @methodName_sonGive=‘getUser_father’ />
通过调用子类传来的methodName_sonGive方法调用父类自己的方法绑定传来的参数

不相关组件之间数据传递

vuex（举例：通过组件修改某.js文件的数据值）

提供代码详细解析见主页下一篇文章

//自定义组件.vue文件
<template>
  <div class="vuex">
      vuex
        {{$store.state.count}}
      <button @click="increment">++</button>
      <button @click="decrement">--</button>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
    methods:mapActions([
        'increment',
        'decrement' 
    ])
} 
</script>

<style>

</style>

//vuex环境下的.js文件
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)

const state = {
    count: 1
}

const mutations = {
    increment(state) {
        state.count++
    },
    decrement(state) {
        state.count--;
    }
}

const actions = {
    increment: ({ commit }) => {
        commit('increment')
    },
    decrement: ({ commit }) => {
        commit('decrement')
    }
}

export default new Vuex.Store({
    state,
    mutations,
    actions
})

最后在app.vue页面渲染结果