在B站看了小码哥的视频,个人认为是全站最好的Vue视频...

bilibiliVue视频

但是今天用到的组件通信发现有几个问题,一是up主的单标签cpn写法其实会盖住父组件中紧随其后的内容,一开始遇到这个问题还没有定位到标签上,但是百度了一下,完全没有相关的记录。

<div class="app">
  <cpn></cpn>
  <h2>这是我的父组件</h2>
</div>

<template id="cpn">
  <div class="">
    <h2>这是我的子组件</h2>
    <button type="button" name="button">change</button>
  </div>
</template>

而且浏览器检查也没有报错,后来就一步步复原到最早案例的样子,发现还是要给自定义组件用上双标签才能正常显示...
请输入图片描述

<div class="app">
  <cpn />
  <h2>这是我的父组件</h2>
</div>

<template id="cpn">
  <div class="">
    <h2>这是我的子组件</h2>
    <button type="button" name="button">change</button>
  </div>
</template>

请输入图片描述

子传父通信有个容易出错的点在于子组件通过$emit发射了一个事件之后,本来应该是子组件向上发送事件信号给父组件的,所以会想当然觉得应该在父组件当中监听事件,但是如果在父组件监听的话,会发现父组件没有反应。

<div id="father">
  <h2>这是父组件数据 {{fathernum}}</h2>
  <cpn @change="changenum"></cpn>
</div>

<template id="cpn">
  <div class="">
    <h2>这是子组件的数据 1</h2>
    <button type="button" name="button" v-on:click="$emit('change')">传输到父组件</button>
  </div>
</template>
<script type="text/javascript">
  Vue.component('cpn',{
    template:'#cpn'
  })

  new Vue({
    el:'#father',
    data:{
      fathernum:0
    },
    methods:{
      changenum(){
        this.fathernum = 1
      }
    }
  })
</script>

正确的写法应该是在自定义组件cpn的标签当中设置监听器,不能受到其他语言的影响,在注册组件的时候就写的很明确了,cpn是一个子组件,那么直接包裹cpn的直接上层div和cpn之间是可以父子通信的

另外似乎没有能够支持跨越父子组件的多代通信,如果从子组件上传到爷爷组件,要先把数据传递到父组件,父组件再传到爷爷组件