第三阶段 Vue day06

注意点

两个组件传递参数的重要点--@自定义事件="父中的执行函数"

• 自定义事件：是其他组件通过emit中的自定义事件传递给父的值
•  "父中的执行函数"：就是父中用来改变值得函数
• props接受参数，可以用来渲染页面，
• 因为prop不能改变值，毕竟值不是组件自己的嘛
• 要想改变值，则需要通过emit来把已经改变的值传递回去
• 然后"父中的执行函数"接受参数，进而改变父中的值和本身的值

 v-bind的作用：讲data中的数据动态的绑定在标签的属性上

当注册局部组件名的时候，如果是短横线写法，要用引号引起来

v-model

可以干两个人的事，父中的函数方法也可以去掉

                    但是组件依然要有emit传递值

 //<input-new :value="msg" @input="onInput"  />

<input-new v-model="msg"  />

插槽技术

使 写在 组件开始标签与结束标签中的内容渲染出来的

        使用 <slot></slot> 预留坑位

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

动态组件

当有很多组件是同级关系，而且它们之间有一个显示隐藏的关系

        为了少些代码，可以使用动态组件

            <component is="xxx"></component>

        xxx 是需要渲染组件的名字，这个 component 组件就会替换成 xxx 组件

项目结构介绍

- node_modules

    - 依赖包

        - 项目依赖

        - 开发依赖

   

- public - 公共文件夹

    - favicon.ico

    - index.html 页面模板，最终运行在浏览器上的就是这个页面

        - 它叫做模板，会经过打包工具做一些额外事情

            - 引入打包好的 js 文件

            - ...

- src 源代码，此目录下的内容，都会经过打包工具处理

    - assets        - 放一些公共的图片资源、公共的css ...

        - logo.png

    - components 组件文件夹

        - HelloWorld.vue

    - App.vue   根组件的唯一一个子组件

    - main.js   整个项目的入口文件

- .gitignore git的忽略文件配置

- babel.config.js babel相关的配置文件

- jsconfig.json  js项目的一些配置，有助于开发工具vscode识别一些比如别名之类的东西

- package.json 包描述文件：项目名、项目介绍、项目版本、项目的依赖...

- package-lock.json 包锁文件

- README.md 读我。项目介绍

- vue.config.js     针对vue的一些配置文件

单文件组件

.vue 文件

> 一个文件就是一个 vue 组件

## 三个结构

1. template 组件的模板

2. script   组件的定义，也就是写组件选项的地方，其他的js也是可以在这儿写的

3. style    组件的样式

## 使用单文件组件有什么好处

1. 配合一些编辑器的插件，有语法高亮和提示

2. 样式可以处理成私有的。

    需要在 style 标签上,添加 scoped 属性

    App.vue 中一般不加这个属性, 因为可以在这个App.vue中写一些全局的样式.

3. 支持模块化系统

4. template 标签,也可以设置其他的模板语言,比如 pug ...

组件名

1. 组件名

    1. 短横线

    2. 大驼峰

    3. 小驼峰

2. prop名

    1. 短横线

    2. 小驼峰

3. 自定义事件的名称

    1. 短横线

    2. 小驼峰

非prop的属性

组件是个标签,标签就可以传递属性,如果传递的属性,在组件内部没有定义为prop.那么这些属性叫做

      非prop的属性, 非prop特性

      非prop的属性有特点

      1. 会继承到组件的根元素身上.

      2. 这些继承的效果是替换的. class与style例外

      3. 这些属性可以在组件内部通过 $attrs 去获取到 class与style例外

      4. 有些时候,可能不希望它自动继承到根元素身上. 在组件内, 配置 inheritAttrs: false,

组件上的特别性质

 $attrs      接受到非prop特性,class与style除外 {}

$listeners  接受到绑定的事件 {}

 <input v-bind="$attrs" v-on="$listeners" />

在根组件v-model

// 针对这个 checkbox 来说,我们 v-model 希望收到的是 checked  change 需要配置 model 选项

  model: {

    prop: "checked", // v-model 的属性是 xxx  ,默认是 value

    event: "change", // v-model 的事件是 xxx, 默认是 input

  },

  props: ["checked"],