组件之间的相互通信

组件之间的相互通信

一、组件传值

（一）父组件=》子组件

1、通过props传值
2、通过refs传值
3、通过children传值（注意：children对象不保证顺序和响应式）

案例展示

--------父组件
<template>
  <div class="home" >
    <img alt="Vue logo" src="../assets/logo.png">
    
    <!-- ****通过props传值**** -->
    <HelloWorld msg="固定属性传值" :title="title" ref="ref_hello"/>
    <AboutUs />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import AboutUs from '@/components/AboutUs.vue'

export default {
  name: 'Home',
  data(){
      return {
          title:'动态属性传值'
      }
  },
  mounted () {
      ****通过$refs传值****
      1、可获取子组件data属性
      this.$refs.ref_hello.ref_title
      2、可修改子组件data属性
      this.$refs.ref_hello.ref_title="通过refs修改子元素data属性值";

     ****通过this.$children对象传值****
      1、根据组件的使用顺序,形成下标，可进行获取或修改子组件属性
      console.log(this.$children[0].ref_title);
      console.log(this.$children[1].ref_title);
      this.$children[1].ref_title = "通过refs修改子元素data属性值";
  },
  components: {
    HelloWorld,
    AboutUs
  }
}
</script>

--子组件HelloWorld
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ title }}</h2>
    <h3>{{ ref_title }}</h3>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
     return {
         ref_title:'hello——子组件标题',
     }
  },
  props: {
    msg: String,
    title:String
  },
}
</script>


--子组件AboutUs
<template>
    <div class="AboutUs">
        <hr>
        <h1>关于我们</h1>
        <h2>{{ref_title}}</h2>
    </div>
</template>

<script>
    export default {
        name: 'AboutUs',
        data() {
            return {
                ref_title: '关于我们——子组件标题',
            }
        },
    }
</script>

（二）子组件=》父组件

1、$emit(事件名称，参数)
2、谁派发，谁监听

*****HelloWorld子组件派发事件
<template>
  <div class="hello">
    <button @click="$emit('showmsg','我是一个参数值')">点我呀</button>
  </div>
</template>

*****父组件
<template>
    <div class="home">
         HelloWorld子组件进行监听
        <HelloWorld @showmsg="showmsg" />
    </div>
</template>

<script>
    import HelloWorld from '@/components/HelloWorld.vue'
    export default {
        name: 'Home',
        methods: {
            showmsg(e){
                console.log('获取成功：'+e);
            }
        },
        components: {
            HelloWorld
        }
    }
</script>

（三）同级组件相互传值

1、通过他们共同的父辈组件来传值。
2、派发关键字$parent.$emit
3、监听关键字$parent.$on

关键字
$prarent 或者$root

*****同级组件AboutUs
<template>
    <div class="AboutUs">
        <hr>
        <h1>组件2：About us</h1>
        <button @click="showmsg">点我呀2</button>
    </div>
</template>

<script>
    export default {
        name: 'AboutUs',
        methods: {
            showmsg() {
                //通过祖辈派发事件
                this.$parent.$emit('openDoor');
            }
        }
    }
</script>

*****同级组件HelloWorld
<template>
    <div class="HelloWorld">
        <hr>
        <h1>组件1：Hello world</h1>
    </div>
</template>
<script>
    export default {
        name: 'HelloWorld',
        created(){
             //监听祖辈事件
             this.$parent.$on('openDoor',()=>{
                 console.log('okkpp');
             })
        }
    }
</script>

*****父组件
<template>
    <div class="home">
        <HelloWorld/>
        <AboutUs />
    </div>
</template>

<script>
    import HelloWorld from '@/components/HelloWorld.vue'
    import AboutUs from '@/components/AboutUs.vue'
    export default {
        name: 'Home',
        components: {
            HelloWorld,
            AboutUs
        }
    }
</script>

（四）祖孙之间的传值

祖先级组件
provide

孙子级组件
inject

(五)八竿子打不着关系的组件

1、建议使用vuex进行数据管理
2、$Myvue 重新聲明一個vue