vue~~~组件通信、props、ref

组件通信

之前也写了一篇关于组件之前通信的，最近又看到了这个东西，感觉之前写的不太全，于是乎这里写的更详细一点，也有一些之前写了，这里没提到，具体看是访问链接吧！！！！！！！
父子组件通信 https://blog.csdn.net/weixin_46087056/article/details/121221418

props 类型

props 接受数可以规定数据类型

props 后面跟类型，可以进行类型检测，检测的结果会在控制台输出，数据依然会传递 数组和对象的默认值需要通过一个工厂函数返回

props: {
  num: Number,
  str: String,
  obj: Object,
  arr: Array,
},

props 接受数据可以进行的操作

自定义检测 参数是传递的数据 函数内部自己判断 根据ruturn的boolean 值判断是否为通过 validator (value) { return true/false }

props: {
  num: {
    type: Number,
    // required: true, // 自定义属性必须传递
    default: 3,        // 自定义属性不传递的时候默认值
  },
  obj: {
    type:Object,
    // default: { name: 123},
    default: function() {
      return { name: 123}
    }
  },
  custom: {
    //自定义检测
    validator(value) {
      console.log(value)
      return ['success', 'error', 'danger'].indexOf(value) !==-1
    }
  }
}

父子组件通信—父传子-使用 prop

父组件在子组件标签中创建自定义标签 :fathershow="show" ，子组件通过 props 来接收 fathershow ： props: ['fathershow'],
props 里的数据为了保证数据的单向流动 只能使用不能修改

• 代码

<template id="father">
  <div>
    <button @click="toggle">toggle</button>
    这里是父组件
    <hr />
    <!-- 通过自定义属性将数据传递给子组件 -->
    <son :fathershow="show"></son>
  </div>
</template>

<!-- 子组件 -->
<template id="son">
  <div>
    这里是子组件
    <div v-show="fathershow" class="son"></div>
  </div>
</template>

Vue.component('son', {
  template: '#son',
  props: ['fathershow'],
});

父子组件通信—子组件调用父组件方法、子组件给父组件传参 使用 自定义事件

在子组件标签上通过 @+自定义事件名 ，在组件内部通过 Eemit 可以触发自定义事件的绑定函数
$emit('自定义事件名'，传递的参数)
组件上的事件处理函数属于父层，自定义事件忽略大小写，在通过 emit 触发时需要注意

• 上代码

<div id="app">
  <div v-if="show" class="parent"></div>
  <hr />
  <son @son-toggle="toggle"></son>
</div>
<!-- 子组件 -->
<template id="son">
  <div>
    这里是子组件
    <button @click="handleToggle">控制父组件div的显示隐藏</button>
  </div>
</template>

// 子组件
Vue.component('son', {
  template: '#son',
  methods: {
    handleToggle() {
      this.$emit('son-toggle');
    },
  },
  mounted() {
    console.log(this);
  },
});

// 父组件
new Vue({
  data: {
    show: true,
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
  },
}).$mount('#app');

亲兄弟通信

有一个公共父元素并且结构不复杂的情况下，可以使用子穿父，父传子的方法

表兄弟通信—使用 eventBus

使用$on注册事件，使用$emit触发注册的事件
只要组件能访问到空的vue实例就能使用 $on 和 $emit

• 上代码

<!-- 父组件 -->
<div id="app">
  <son1></son1>
  <hr />
  <son2></son2>
</div>
<!-- 子组件1 -->
<template id="son1">
  <div>
    这里是子组件1
    <div class="test" v-if="show"></div>
  </div>
</template>

<!-- 子组件2 -->
<template id="son2">
  <div>
    这里是子组件2
    <button @click="toggle">切换</button>
  </div>
</template>

let angule = new Vue();
new Vue({
  components: {
    // 子组件一
    son1: {
      template: '#son1',
      data() {
        return {
          show: true,
        };
      },
      methods: {
        toggle(params) {
          console.log('params', params);
          this.show = !this.show;
        },
      },
      mounted() {
        console.log('son1', angule);
        // 注册事件 custom   后面为 携带的参数
        angule.$on('custom', this.toggle);
      },
    },
    // 子组件二
    son2: {
      template: '#son2',
      methods: {
        toggle() {
          // 触发事件 custom 后面为 携带的参数
          angule.$emit('custom', 798);
        },
      },
    },
  },
}).$mount('#app');

ref

通过ref绑定一个元素 可以获取到真是的Dom
通过ref绑定一个组件 可以获取到组件的实例
也就是说，我们通过给子组件绑定 ref ，在父组件中就可以获取到子组件实例，也就是可以访问到子组件的 方法、变量，可以实现父子组件的通信

• 上代码

<!-- 父组件 -->
<div id="app">
  <p ref="hehe">绑定p元素</p>
  <!-- 给子组件绑定了ref 获取子组件的实例 -->
  <son ref="xixi" class="son"></son>
</div>

<!-- 子组件 -->
<template id="son">
  <div>
    这里是子组件 {{show}}
    <div v-if="show">test</div>
    <button @click="toggle">改变</button>
  </div>
</template>

// 全局子组件
Vue.component('son', {
  template: '#son',
  data() {
    return {
      show: false,
    };
  },
  methods: {
    toggle() {
      console.log('执行了');
      console.log(this);
      this.show = !this.show;
    },
  },
  mounted() {
    // console.log(this)
  },
});

// 父组件
new Vue({
  data: {},
  mounted() {
    console.log(this);
    console.log(this.$refs.hehe);
    // 父元素里获得到子组件的实例 data methods
    // 获取实例里的方法都能进行修改和触发， 慎用！
    console.log(this.$refs.xixi);
    setTimeout(() => {
      this.$refs.xixi.show = true;
      // console.log(this.$refs.xixi)
      // this.$refs.xixi.toggle();
    }, 1000);
  },
}).$mount('#app');