VUE中组件通信

VUE中组件通信

1.使用props
2.自定义事件
3.PubSub发布订阅
4.vuex(重点)

注意点：
1.不要通过子组件来改变父组件的状态数据（应该告诉父组件，让父组件自己改）
2.数据和处理数据的函数应该在同一模板内（父组件的数据要修改，方法等要绑定在父组件中，然后再传给子组件才合理）

第一种方法props的使用：
（1）.在子组件中添加props插件

<script>
    export default {
        name: "PropsComponent",
        props:['name','age']
    }
</script>

（2）.在子组件中直接使用已经定好的值

<template>
    <div>
        <h4>姓名：{{name}}</h4>
        <h4>年龄：{{age}}</h4>
    </div>
</template>

（3）.在父组件中声明值的内容，相当于赋值

<PropsComponent name="ls" age="18"></PropsComponent>

这样普通的定义和接受有缺陷，无法限制传进来的值的类型

修改：

//子组件中先定义好接受数据的类型，可以是对象，数组，方法，字符串等
<script>
    export default {
        name: "PropsComponent",
        props:{
            // 数值类型, 是否一定要求,默认值
            name:{type:String , require:true , default:'www'},
            age:Number,
            person:Object,
            logPerson:Function,
        }
    }
</script>

（4）.子组件在定义值得时候要动态绑定，其他使用都一样，绑定方法

<template>
    <div>
        <h4>姓名：{{name}}</h4>
        <h4>年龄：{{age}}</h4>
        <h4>{{person}}</h4>
        <button @click="logPerson('zl',18)">点击输出</button>
    </div>
</template>

（5）.父组件将定义好的值和方法传入（计算父组件的值和方法，都定义再父组件中）

<PropsComponent name="ls" :age=18 :person="p" :log-person="logPerson"></PropsComponent>

,
      methods:{
          logPerson(name ,age ){
              alert(`${name} ${age}`)
          }
      }

第二种方法：自定义事件传递参数
局限和props一样，使用更麻烦一些

（1）.在子标签中定义一个方法

<button @click="btnClick"></button>

（2）.告诉父组件，点击了按钮 通过$emit

methods:{
            btnClick(){
                this.$emit('btnClick',{name:'name',age:18})
            }
        }

（3）.在父组件中接受绑定，并且自己定义方法
//CustomEvents为子组件名字

<CustomEvents @btnClick="del"></CustomEvents>

（4）.要被修改的p标签定义

  <p ref="word" class="word">要被删除</p>

（5）.执行父组件自己定义的del方法

 del(args){
              console.log(args),
                  this.$refs.word.remove();
          }

第三种方法：PubSub发布订阅
安装pubsub

npm install --sava pubsub-js

在要使用的父子组件中都import添加
这种方式，父亲订阅，儿子发布

在子组件的删除方法下添加（删除方法由Button点击监听）

//子组件的button中有一个点击事件delBtn
<button v-show="isShowButton" class="btn btn-warning" @click="delBtn">删除</button>

//在子组件中methods实现方法delBtn（）同时，发布一个 PubSub.publish给父组件订阅
        methods:{
            delBtn(){
                if(window.confirm(`你确定删除任务吗${this.todo.title}吗?`)){
                    // this.delTodo(this.index)
                    //发布消息给父组件
                    PubSub.publish('delTodo',this.index)
                }
            }
        }

在父组件mounted中添加

  mounted() {
    //订阅消息（delTodo）
      PubSub.subscribe('delTodo',(msg,token)=>{
      console.log(msg, token);//msg指的是订阅的名字，token指的是传过来的参数
      this.delTodo(token);
    })
  }