目录

• • 一、组件
  • 二、组件的分类
  • • （一）全局组件
    • （二）局部组件
    • • 1、为什么vue组件 data函数返回一个对象
      • 2、bootstrap的使用
  • 三、父组件传值给子组件
  • • • 1、父传子实现进度条
      • 2、 props的属性
  • 四、子组件传值给父组件
  • 五、兄弟组件传值

一、组件

• 可以复用的页面的一部分

学习的前提是导入文件

链接：https://pan.baidu.com/s/1nJyLYYKt4c4QLfeuQrUGOg 提取码：1115

二、组件的分类

• 一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册

（一）全局组件

• 使用 Vue 应用实例的app.component() 方法，让组件在当前 Vue 应用中全局可用
• 定义一个全局组件，组件必须提供模板（component）,提供组件的内容

• template的优先级比mount挂载元素高

（二）局部组件

• 定义一个局部注册的组件, 必须提供模板内容
• 必须注册组件

	console.log(Vue);

1、为什么vue组件 data函数返回一个对象

• 每个实例可以拥有一个独立数据对象，在其中一个实例上数据改变了，其他实例数据不收影响

2、bootstrap的使用

• 官网：https://www.bootcss.com/

• 进度条的实现

三、父组件传值给子组件

• 父组件是通过自定义属性把值传给子组件
• 传值的时候, 如果不绑定传过去的都是字符串，绑定了可以识别各种类型和变量
• 子组件通过props属性进行接收
• 父组件传给子组件的值不能改

1、父传子实现进度条

2、 props的属性

• type:Number （类型）
• required:true （必须传递这个参数）
• default:100 （默认值）
• validator(value){ return value>=0 && value<=750 } （自定义验证规则）

四、子组件传值给父组件

1.监听
2.触发事件, 发送数据
3.接收, 就是子组件传过来的值

• 子传父实现todolist添加功能

        let Txt = {template: ``,data() {return {str: ''}},methods: {send() {//把值发给父组件this.$emit("msg", this.str);//清空文本框this.str = ""}}}let List = {props: ["arr"],template: `
{{item}}    
`}Vue.createApp({components: {Txt, List},data() {return {arr: ["aa", "bb", "cc"]}},methods: {add(e) {  //e 就是子组件文本框的数据this.arr.push(e);}}}).mount("#box")

五、兄弟组件传值

• mitt实现兄弟组件传值
• 官网：https://www.npmjs.com/package/mitt