目录

简介

第一部分：子组件内容

 第二部分：父组件

第三部分： main文件

第四部分：知识点补充

---

简介

       在讲述组件之前，我们先来谈谈，组件的存放位置以及“暴露”，“接收”数据；暴露的方式是：

接收数据的方式是：

 在暴露和接收的基础上，咱们再来讲述子组件的存放位置以及每个组件的使用顺序（用法）：子父组件均都存放在components文件内部

 

 每个组件的使用顺序（方法）：子组件（程序员自己创建的vue组件）---> App父组件（主要用于：将程序员写的所有子组件归总到一起渲染到页面中），在子组件中是利用插值语法或者其它形式展示出来的效果，在父组件中直接使用（这里的直接使用是将数据传入之后通过components:进行包裹之后，做自定义标签插入页面中（HTML）即可展示预期效果）--->下面就是main.js文件，这里主要是调用App.vue文件,将数据整合在一起，形成一个js文件 --->接下来便是HTML文件，这里需要将js文件引入（我们编写的main.js文件）--->页面刷新保存，整合数据，即成功实现页面效果【在之前的每个环节中都有css样式，可以自行添加样式效果除（main.js）不含有】

下面补充一个知识点：，，

在上面的内容步骤了解后，下面咱们讲述子组件内容：

第一部分：子组件内容

第一个组件名是：DangWenJian.Vue

 续：

 以上是第一个子组件的结果，让个位粉丝更清晰了解详细过程：

 第二个子组件名：HelloWorld.Vue

续：

续： 

 全局组件示例：

 第二部分：父组件

父组件名：app.vue

 续：

第三部分： main文件

main.js源文件:

 HTML内容下期继续讲述。

源代码部分：根据展示的截图逐一展示源代码

第一个组件名是：DangWenJian.Vue

 第二个子组件名：HelloWorld.Vue 

  全局组件示例：

父组件名：app.vue

main.js源文件（main.js是一个入口文件）: 

import Vue from 'vue'

import App from './App.vue'

Vue.config.productionTip = false

// import NewProm from "./components/NewProm.vue";

// vue.component('Newprom',NewProm)

// Vue.component('vue', function)  //全局注册  第一个是别名，第二个是组件名

new Vue({

  render: h => h(App),

}).$mount('#app')

第四部分：知识点补充

这里仅了解即可，紧跟博主，带你一起做完整项目：

跑起项目：npm  run serve

打包项目:   npm  run  build

安装项目：npm  install

组件间通讯  父传子  props 

component 全局注册

版本号查询：

vue --version 查找全局版本号
node -v 查找node的版本号
npm -v查找npm版本号
yarn add vue@next更新升级yarn版本号

跨域    js同源策略：
不同端口号， 不同域名 不同网址等都称为跨域

根据上面的内容，下面有解构式笔记供大家参考：