关于vue.js:vue组件知识全梳理

组件

概念：template 是入口组件，那么挂载在 template 下的组件是入口组件的子组件

部分组件

三步口诀：声子，挂子，用子

1. 申明一个部分组件，变量名首字母大写（为了和 H5 标签做辨别），外面的内容和 vue 实例化对象的内容类似，然而不须要 el，data 必须是一个函数，函数返回一个对象
2. 把组件挂载到入口文件的 components 对象中。
3. 在入口文件的 template 中应用，能够是双闭合标签也能够是单闭合标签

全局组件

Vue.component(name,options)
第一个参数是组件的名称
第二个参数是组件的对象
留神全局组件要在创立 Vue 实例化对象前，否则会报错

 // 全局组件(要在创立 Vue 实例之前)
 Vue.component('Vbtn', {template: `<button> 全局按钮组件 </button>`})
 // 1、创立一个入口组件
 // 2、创立头部组件，侧边栏组件和内容组件
 var Heard = {
 template: `
 <div>
 <h2> 我是头部组件 </h2>
 <Vbtn></Vbtn>
 </div>
 `
 }
 var Aside = {
 template: `
 <div> 我是侧边栏组件 </div>
 `
 }
 var Content = {
 template: `
 <div> 我是内容组件 </div>
 `
 }
 var App = {
 template: `
 <div class="main">
 <Heard class = "heaed"></Heard>
 <div class="main2">
 <Aside class="aside"></Aside>
 <Content  class="content"/>
 </div>
 </div>
 `,
 components: {
 Heard,
 Aside,
 Content
 }
 }
 new Vue({
 el: "#app",
 data() {
 return {msg: "这是测试"}
 },
 template: `
 <App></App>
 `,
 components: {App}
 });

组件深刻

问：为什么要通过父亲获取数据，在传递到子组件呢？
答：通过父亲向后端获取数据，而后在散发到各组件能够缩小后端的交互，不然各个组件都向后端发送申请影响性能
见下图：

父子组件传值（父传子）

1、父 用子 时通过 绑定自定义属性 传递，
2、子要 申明 props:[‘ 属性 ’] 接管父绑定的自定义属性
3、收到就是本人的轻易用

• 在 template 中间接应用
• 在 js 中 this. 属性名

小补充：绑定自定义属性时：常量传递间接用，变量传递加冒号

总结父传子

父用子：先声子、挂子、用子
父传子：父传子（属性）、子申明（接管）、子应用

子传父

1、父 用子 绑定 自定义事件
2、子触发自定义事件：this.$emit()

第一个参数是 ** 自定义事件名 **
第二个参数是 ** 传递进去的值 **
![image](/img/bVbO3Ps)

全局组件的数据传递

1、通过 VUE 内置组件 slot 散发内容

起因：如果不应用 slot 无奈批改全局组件的内容
作用：slot 元素作为承载散发内容的进口

2、父子传值

自定义属性传递常量间接应用不须要加冒号

如果要触发原生的事件须要通过 @原生事件名.native 调用

3、具名插槽

在子组件中申明应用 vue 的内置组件：
<slot name = “one”></slot>
父组件中调用
<h2 slot= “one”></h2>
这样做的目标：能够一条数据一个坑，数据不会乱了

附加性能

1、过滤器 filters

1、作用: 对以后数据添枝加叶
2、语法：申明在组件内应用 filters 对象，返回一个函数，函数肯定要有返回值
3、调用：template 中调用过滤器：数据属性 | 过滤器名字

var Content = {
     template: `
         <div>
         <input type = number  v-model = "msg"/>
         <h2>{{msg|RmbData}}</h2>
         </div>
     `,
     data(){
         return{msg:10}
     },
     filters:{RmbData(value){return '$'+value}
     }
 }

生命周期