Vue3和TypeScript学习笔记coderwhyDay11之Vue组件化

---

组件化

App组件是Header、Main、Footer组件的父组件
Main组件是Banner、ProductList组件的父组件

组件拆分的实现
App.vue

<template>
  <div id="app">
    <Header></Header>
    <Main></Main>
    <Footer></Footer>
  </div>
</template>

<script>
  import Header from './Header';
  import Main from './Main';
  import Footer from './Footer';

  export default {
    components: {
      Header,
      Main,
      Footer
    }
  }
</script>

<style scoped>
</style>

---

main.vue

<template>
  <div class="main">
    <main-banner></main-banner>
    <main-product-list></main-product-list>
  </div>
</template>

<script>
  import MainBanner from './MainBanner.vue';
  import MainProductList from './MainProductList.vue';

  export default {
    components: {
      MainBanner,
      MainProductList
    },
  };
</script>

<style scoped>
</style>

---

MainBar.vue

<template>
  <h2>Banner</h2>
</template>

<script>
  export default {
    
  }
</script>

<style scoped>
</style>

---

MainProductList.vue

<template>
  <ul>
    <li>商品信息1</li>
    <li>商品信息2</li>
    <li>商品信息3</li>
    <li>商品信息4</li>
    <li>商品信息5</li>
  </ul>
</template>

<script>
  export default {
    
  }
</script>

<style scoped>
</style>

---

组件之间相互进行通信

比如App可能使用了多个Header，每个地方的Header展示的内容不同，那么我们就需要使用者传递给Header一些数据，让其进行展示
在Main中一次性请求了Banner数据和ProductList数据，那么就需要传递给它们进行展示
子组件中发生了事件，需要由父组件来完成某些操作，需要子组件向父组件传递事件

父子组件之间通信的方式
父组件传递给子组件：props属性
子组件传递给父组件：$emit触发事件

---

父组件传递给子组件

父组件数据，需要子组件展示：props（数组或对象）

什么是props
在组件上注册一些自定义的attribute
父组件给这些attribute赋值，子组件通过attribute的名称获取到对应的值

两种常见用法
方式一：字符串数组，数组中的字符串就是attribute的名称
方拾二：对象类型，对象类型就是我们可以在指定attribute名称的同时，指定它需要传递的类型，是否必须的、默认值等

props数组用法

数组用法只能说明传入的attribute的名称，并不能对其进行任何形式的限制。
对象语法，可以传入更多限制内容。
指定attribute的类型、是否必传、默认值。

 props: {
      title: String,
      content: {
        type: String,
        required: true,
        default: "123"
      },
      counter: {
        type: Number
      },
      info: {
        type: Object,
        default() {
          return {name: "why"}
      }
  }

细节补充

细节1：type的类型可以是哪些？
String、Number、Boolean、Array、Object、Date、Function、Symbol

细节2：对象类型的其他写法

对于带有默认值的对象，这种情况。我们需要default函数返回一个对象。
比如a.message可能传给多个子组件，返回对象引用类型，会导致message被共用。

default：{message：'a'}

所以，把default写成函数，返回对象。这样每次子组件调用的对象都指向不同的地址。

default(){
	return { message：‘a’}
}

细节3：props的大小写名
HTML中的attribute大小写不敏感的，浏览器会把所有大写字符解释为小写字符
使用DOM模板，驼峰命名需要使用等价分隔符命名。
但开发中是用vue-loader解析的，驼峰写法也OK。但是推荐分隔符写法。

<show-message messageInfo='哈哈'></show-message>
<show-message message-info='哈哈'></show-message>

---

非Prop的Attribute

什么是非Prop的Attribute？
传递给一个组件某个属性，但该属性并没有定义对应的props或emits时,就称为非Prop的Attribute。常见的class、style、id属性等

（1）Attribute继承

当组件有单个根节点时，非Prop的Attribute将自动添加到根节点的Attribute中

（2）禁用Attribute继承

不希望组件的根元素继承attribute，在子组件中设置inheritAttrs:false
场景：将attribute应用于根元素之外的其他元素
$attrs来访问所有的非props的attribute

子组件禁止继承属性
 export default {
    inheritAttrs: false
 }

（3）多个根节点的attribute

多个根节点的attribute如果没有显示的绑定，会警告，必须手动的指定要绑定到哪一个属性上

<template>
  <h2>MultiRootElement</h2>
  <h2>MultiRootElement</h2>
  <h2 :id="$attrs.id">MultiRootElement</h2>
</template>

---

子组件传递给父组件

子组件传递给父组件:$emit（数组或对象）
什么情况子组件传给父组件？
当子组件有一些事件发生时，比如组件中发生点击，父组件需要切换内容
子组件有一些内容想要传递给父组件的时候

如何完成上面的操作
首先，在子组件定义好在某些情况下触发的事件名称
其次，在父组件中以v-on方式传入要监听的事件名称，并且绑定到对应的方法中
最好，子组件中发生某个事件的时候，根据事件名称触发对应的事件

自定义事件的流程
我们封装一个组件，内部监听两个按钮的点击，点击之后通过this.$emit的方式发出去事件

---

写代码注意点：
1.vue-cli基于webpack，webpack已经帮我们把extensions配置好了，所以，引入模块时可以把.vue省略
VSCode导入如果不加后缀，不能Ctrl点进去。
用VSCode开发时最好加后缀，方便我们跳代码和自动补全自定义组件

2.vscode插件推荐
Vetur：auto import关掉
Vue3 Snippets
Vue VSCode Snippets（vbase-css自动补全）

---

• props

• 以上笔记参考coderwhy老师的Vue3和TypeScript。
  老师讲课链接：课程链接