辉太郎看前端(组件通信)

前言

• 组件通信的方式
• 组件通信的使用

方式

• 父类组件向子类组件传输数据(父传子)
• 子类组件向父类组件传输数据(子传父)
• 拥有同一父类组件的两个子类组件之间传输数据(兄弟组件通信)

父传子

• 在父组件的子组件标签上自定义一个属性，挂载需要的数据。
• 在子组件中通过props来接受传输过来的属性名，接收到的数据可以直接使用。

父组件

//父组件
<addList :list="挂载的数据"/>

<script>
//导入组件
import addList from 'addlist.vue'
    export default {
        data() {
            return {}
        },
      //注册组件
      components:{addList}
    }
</script>

子组件

//子组件
<script>
 export default {
    //接收父组件中的数据
       props:['list'],
        data() {
            return {}
        },
        }
</script>

子传父

• 在父组件的子组件标签上自定义一个事件，挂载所需要的方法。
• 在子组件中通过this.$emit('自定义的事件名',数据)，来触发父组件中的自定义事件，在子组件中用vue提供的事件，挂载方法，this.$emit写在方法中。

父组件

 //父组件
 <addList @list="acc"/>
 <script>
//导入组件
import addList from 'addlist.vue'
    export default {
        data() {
            return {
                 flag:false,
                 }
        },
      methods:{
        acc(obj){
          this.flag=obj
         }
        }
    }
</script>

子组件

//子组件
<div @click="add()"></div>
<script>
 export default {
        data() {
            return {}
        },
        methods:{
          add(){
          this.$emit('list',true)
          }
         }
   }
</script>

兄弟组件通信

• 在src目录中新建一个bus.js，导出一个空的vue实例。
• 在传输数据的一方，引入bus.js，调用bus.$emit('事件名',传输的数据)，来完成数据的传输。
• 在接收数据的一方，引入bus.js，调用bus.$on("事件名"，回调函数)，来完成数据的接收。

//新建的bus.js
import Vue from 'vue'
export default new Vue({})

传输数据的一方

<li @click="send"></li>
<script>
//传输数据的一方
import Bus from 'bus.js的路径' //导入bus.js
 export default {
        data() {
            return {}
        },
        methods:{
         send(){
            Bus.$emit('aa',123)
           }
         }
   }
</script>

接收数据的一方

//接收数据的一方
import Bus from 'bus.js的路径' //导入bus.js
 export default {
        data() {
            return {}
        },
       mounted(){
         Bus.$on("aa",(data)=>{
            this.newtitle=data
          })
        }
   }

Vuex可以实现在任意组件中传参

在store.js中

• 可以在state中定义变量
• 在组件中通过this.$store.state.变量名来使用，在循环或渲染时直接$store.state.变量名

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

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

总结

初出茅庐，多多关照。不够完整，后续还会努力补充。