【Vue3】3-4 : 组件的属性与事件是如何进行处理的

本书目录：点击进入

一、组件通信特征

1.1 特征一 : 不通过props接收属性，会直接挂载到组件容器上

>  实操

注释 props: ['title'] 前

注释 props: ['title'] 后

> 效果

1.2 特征二 : 不通过emits接收事件，会直接挂载到组件容器上

> 实操：在组件上定义handleClick事件，点击组件触发打印当前目标

> 效果

1.3  特征三 : inheritAttrs：true 选项阻止属性和事件挂载

>  实操

>  效果

1.4  特征四 : 可通过 $attrs 内置语法，给指定元素传递属性和事件

>  实操

>  效果 

---

一、组件通信特征

1.1 特征一 : 不通过props接收属性，会直接挂载到组件容器上

>  实操

注释 props: ['title'] 前

• props接收title，所以title在组件中不显示

• class没有被接收，所以在组件中显示

注释 props: ['title'] 后

• title，class 均在组件中显示，即 属性会直接挂载到组件容器上

> 效果

1.2 特征二 : 不通过emits接收事件，会直接挂载到组件容器上

• 现象：通过props接收属性，在组件容器上会隐藏

> 实操：在组件上定义handleClick事件，点击组件触发打印当前目标

> 效果

1.3  特征三 : inheritAttrs：true 选项阻止属性和事件挂载

>  实操

>  效果

• title，class 属性不会挂载

• handleClick 事件不挂载

1.4  特征四 : 可通过 $attrs 内置语法，给指定元素传递属性和事件

• 适合父子通讯

实例中：

• 父组件：<my-head> 

• 子组件：<header>

• $attrs 将父组件的 title、class、@click 传递给 子组件

>  实操

<div id="app">
    <my-head title="hello world" class="box" @click="handleClick"></my-head>
</div>
<script>
    let app = Vue.createApp({
      data(){
        return {
        }
      },
      methods: {
        handleClick(ev){
          console.log(ev.currentTarget);
        }
      }
    })
    app.component('MyHead', {
      template: `
        <header>
          <h2 v-bind:title="$attrs.title">logo</h2>
          <ul v-bind:class="$attrs.class">
            <li>首页</li>
            <li>视频</li>
            <li>音乐</li>
          </ul>
        </header>
      `,
      mounted(){
        console.log( this.$attrs );   // 也可以完成父子通信操作
      },
      inheritAttrs: false   // 阻止默认的属性传递到容器的操作
    });
    let vm = app.mount('#app');
</script>

>  效果