组件的三个特性

数据的单一性可复用性和可扩展性

vue组件通信的几个场景

1. • 父----子props

一个组件中引入另一个组件此时就会构成一种“父子关系”当前组件为父引入组件为子

组件通信流程

在父组件中的子组件上绑定我们要传递的数据然后我们在子组件中通过props进行接收我们父组件传递过来的数据子组件中props中接收的属性名需要与我们父组件传递的属性名一致

代码展示

父组件

<template>
  <div class="home">
    <div>我是父组件</div>
    <div>{{ message }}</div>
    <About :message="toChildrenMsg"></About>
  </div>
</template>

<script>
import About from './About.vue'
export default {
  name: 'Home',
  components: {
    About
  },
  data(){
    return {
            message:'我是父页面的内容',
            toChildrenMsg:'从父页面传过到子页面的内容'
    }
  }
}
</script>

子组件

<template>
  <div class="about">
    <div>我是子页面</div>
    <div>{{ message }}</div>
  </div>
</template>
<script>
export default{
  props:{
    message:{type:String,default:''} //类型和默认值
  }
}
</script>

我们可以给他指定类型和默认值

2. • 子----父$emit

组件通信流程

在子组件中通过$emit方法向父组件通信

子组件

<template>
  <div class="about">
    <div>我是子页面</div>
    <div>
      <button @click="toMethod">点击我</button>
    </div>
  </div>
</template>
<script>
export default{
  data(){
    return {

    }
  },
  methods:{
    toMethod(){
      this.$emit('fromChildMethod')
    }
  }
}
</script>

父组件

<template>
  <div class="home">
    <div>我是父组件</div>
    <div style="color: lightcoral;font-size: 20px;">{{ fromChildMsg }}</div>
    <About  @fromChildMethod="fromChild"></About>
  </div>
</template>

<script>
import About from './About.vue'
export default {
  name: 'Home',
  components: {
    About
  },
  data(){
    return {
            fromChildMsg:''
    }
  },
  methods:{
        fromChild(){
            this.fromChildMsg = '子页面触发的方法' 
        }
    }
}
</script>

3. • bus事件总线

在我们真实的项目开发中不会只有上面两种通信方式还会有兄弟组件通信和跨组件通信方式

通信流程

先在src目录下创建一个新的文件夹bus里面创建一个index.js文件然后创建一个新的vue实例

import Vue from "vue";

export default new Vue()

接下来就是引入这个新的实例常见的导入方式有全局导入和局部导入两种方式我使用的是全局导入方式

在main.js中将bus作为当前vue实例的原型方法能直接在组件内通过this.bus的方式进行调用

main.js文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import bus from './bus/index'

Vue.config.productionTip = false
Vue.prototype.bus = bus

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

父组件

<template>
  <div class="home">
    <div>我是父组件</div> 
    <button @click="toBus">bus传值</button>
    <About></About>
  </div>
</template>

<script>
import About from './About.vue'
export default {
  name: 'Home',
  components: {
    About
  },
  data(){
    return {
       
    }
  },
  methods:{
    toBus(){
      let val='父组件向子组件传递数据'
      this.bus.$emit('toChild',val)
    }
    }
}
</script>

子组件

子组件监听父组件触发的事件在mounted阶段进行绑定监听注意事件名称要一致通过this.bus.$on()监听当总线中监听到触发该方法拿到传过来的值也可以在里面执行自定义方法

<template>
  <div class="children-box">
      <div>
          <div>我是子页面</div>
          <div style="font-size:20px;color:blue;">{{fromParentMsg}}</div>
      </div>
  </div>
</template>

<script>
export default {
  name:"Children",
  data(){
      return {
          fromParentMsg:''
      }
  },
  mounted(){
      this.bus.$off('toChild')
      this.bus.$on('toChild',val=>{   
          this.fromParentMsg = val    //此处为复制操作也可在里面执行相应的方法
      })
  }
}
</script>

4. • vuex

vuex相当于是一个仓库我们可以把数据存放到仓库中保持存进去的状态可以进行修改也可以实现取出的操作是一个全局的状态

如果在配置项目的时候没有配置vuex那么我们就需要手动的进行下载vuex操作

使用命令

    npm install vuex --save

然后再src目录下新建一个store文件夹在文件夹中创建一个index.js文件然后进行如下配置

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

然后在main.js中进行全局引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import bus from './bus/index'

Vue.config.productionTip = false
Vue.prototype.bus = bus

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

然后我们通过this.$store.state.属性名来获取

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

在state中定义一个属性然后我们在其他组件中获取这个属性

<template>
  <div class="home">
    <div>我是父组件</div>
    <div>
        {{ this.$store.state.msg }}
    </div>
    <About></About>
  </div>
</template>

<script>
import About from './About.vue'
export default {
  name: 'Home',
  components: {
    About
  },
  data(){
    return {
     
    }
  },
  methods:{
  
    },
    mounted(){
      this.$store.state.msg='你好啊张三'
    }
}
</script>

以上就是vue2中我们常见的组件通信的方式