关于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
         }
     }
 }

生命周期