Vue组件间通信

Vue组件间通信

一、引入组件模块

写一个父组件页面Index.vue：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div class="componentContainer">
      <h1>父组件模块</h1>
    </div>
    <div class="componentContainer">
      <dialogComponent>  // << 使用子组件
      </dialogComponent>  
    </div>
    
  </div>
</template>

<script>
import dialogComponent from './component/dialogComponent'  //<<引入子组件
export default {
  name: 'index',
  components:{ //<<申明子组件
    dialogComponent
  },
  data () {
    return {
      msg: '组件模块开发'
    }
  }
}
</script>


<style scoped>
h1, h2 {
  font-weight: normal;
}
.componentContainer{
  height: 30vh;
  widows: 80vw;
  border: 1px solid rgb(95, 94, 94);
}
</style>

子组间dialogComponent.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    
  </div>
</template>

<script>
export default {
  name: 'dialogComponent',
  data () {
    return {
      msg: '子组件模块'
    }
  }
}
</script>

结果：

二、传参

（一）、单项传参（父亲->儿子）

在父亲中：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div class="componentContainer">
      <h1>父组件模块</h1>
    </div>
    <div class="componentContainer">
      <dialogComponent
      :toChildValue_msg = toChildValue_msg
      :toChildValue_json = toChildValue_json
      >
      </dialogComponent>  
    </div>
    
  </div>
</template>

<script>
import dialogComponent from './component/dialogComponent'
export default {
  name: 'index',
  components:{
    dialogComponent
  },
  data () {
    return {
      msg: '组件模块开发',
      toChildValue_msg : "父亲发送给儿子", // <<字符串传参
      toChildValue_json: {   // <<json串传参
        name: "baba",
        do: "to msg"
      }
    }
  }
}
</script>

在儿子中：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h4>{{toChildValue_msg}} {{toChildValue_json.name}} {{toChildValue_json.do}}</h4>
  </div>
</template>

<script>
export default {
  name: 'dialogComponent',
  props:{
      toChildValue_msg: String,   // << 申明String
      toChildValue_json: Object   // << 申明json 
  },
  data () {
    return {
      msg: '子组件模块'
    }
  }
}
</script>

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

三、方法调用

（一）、儿子调用爸爸

父组件中的方法

fatherConsole() {
    console.log("爸爸输出");
},

子组件调用父类方法

clickmethons() {
    this.$parent.fatherConsole();
},

甚至还可以获取子组件中的参数

this.$parent.toChildValue_json.name

（二）、爸爸调用儿子

对子组件加一个ref引用

<div class="componentContainer">
<dialogComponent
ref="son"
></dialogComponent> 

父组件通过this.$refs即可找到该子组件，也可以操作子组件的方法

this.$refs.son.子组件方法

甚至还可以获取子组件中的参数

this.$refs.son.参数名

四、完整代码

Index.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div class="componentContainer">
      <h1>父组件模块</h1>
      <button @click="getSonFunction()">调用儿子的方法</button>
      <h4>{{toFatherVluae_json}}</h4>
    </div>
    <div class="componentContainer">
      <dialogComponent
      :toChildValue_msg = toChildValue_msg
      :toChildValue_json = toChildValue_json
      :toFatherVluae_json = "toFatherVluae_json"
       @outputJson = "outputJson"
       ref="son"
      >
      </dialogComponent>  
    </div>
    
  </div>
</template>

<script>
import dialogComponent from './component/dialogComponent'
export default {
  name: 'index',
  components:{
    dialogComponent
  },
  data () {
    return {
      msg: '组件模块开发',
      toChildValue_msg : "父亲发送给儿子",
      toFatherVluae_json: "null",
      toChildValue_json: {
        name: "baba",
        do: "to msg"
      }
    }
  },
  methods: {
    fatherConsole() {
      console.log("爸爸输出");
    },
    outputJson(json) {
      console.log(json);
    },
    // 调用儿子的方法
    getSonFunction() {
      this.$refs.son.sonConsole();
      console.log(this.$refs.son.msg);
    }
  },
}
</script>


<style scoped>
h1, h2 {
  font-weight: normal;
}
.componentContainer{
  height: 30vh;
  widows: 80vw;
  border: 1px solid rgb(95, 94, 94);
}
</style>

dialogComponent.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h4>{{toChildValue_msg}} {{toChildValue_json.name}} {{toChildValue_json.do}}</h4>
    <button @click="clickmethons()">儿子调用爸爸方法</button>
  </div>
</template>

<script>
export default {
  name: 'dialogComponent',
  props:{
      toChildValue_msg: String,
      toChildValue_json: Object
  },
  data () {
    return {
      msg: '子组件模块',
      toFatherVluae_msg: "发给爸爸的一封信",
      toFatherVluae_json: {
          name: "tobaba",
          do: "tobabado"
      },
    }
  },
  methods: {
    sonConsole() {
      console.log("儿子输出");
    },
    // 按钮点击事件
    clickmethons() {
        this.$parent.fatherConsole();
        console.log(this.$parent.toChildValue_json.name);
    },
    // 调用父组件方法
    tofatherF() {
        this.$emit('outputJson', this.toFatherVluae_json);
    }
  },
}
</script>

结果：

什么情况下我应该使用 Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。