Vue组件进阶

props

props: {
	msg: {
		type: Number, // Number String Boolean Object Array Function,
		required: true, // 规定了msg这个参数是必传的
		default: 100, // 如果参数没有传递，则使用默认值
	}
}

// 如果类型为数组或对象
props: {
	obj: {
		type: Object,
		default() {
			return {a: 1}
		}
	},
	arr: {
		type: Array,
		default: function() {
			return [1,2,3]
		}
	}
}

ref （*）

• 获取dom元素

  <h1 ref="mohensuibian"></h1>
  this.$refs.wohensuibian
  

• 获取子组件实例

  <Son ref="myson" />
  this.$refs.myson
  

• ref配合v-for使用绑定元素

  <span ref="myspan" v-for="item in arr"></span>
  this.$refs.myspan => [span, span]
  

jquery (在vue的项目中如何全局使用第三方插件)

• 在index.html 内通过script进行引入 不推荐

• 通过npm

  • 下载 npm i jquery --save 保证命令行启动在项目下

  • Main.js

    import $ from 'jquery'
    Vue.prototype.$ = $
    

is属性 ()

is: 是

is=“组件名称”

<button>登录</button>
<button>注册</button>
<div :is="comName"></div>


data() {
	return {
		comName: "Login"
	}
},
methods: {
	login() {
		this.comName = "Login"
	},
	register() {
		this.comName = "Register"
	}

slot 插槽

什么是插槽

小霸王

在封装vue组件的时候，我们在组件的结构内的某个位置预留出一些空间，最终这个空间会被调用这个组件时传递的结构所取代

• 匿名插槽

  // 某一个组件  Son
  <slot></slot>
  
  
  <Son>
  	<p>这里的东西会替代slot的位置</p>
  </Son>
  

• 具名插槽

  // 某一个组件  Son
  <slot name="slotA"></slot>
  <slot name="slotB"></slot>
  
  
  <Son>
  	<div slot="slotA"></div>
  	<div slot="slotB"></div>
  </Son>
  

• 作用域插槽

  子组件的结构由父组件决定，但是数据是由子组件暴露出去

  // 某个组件 Son
  <slot :arr="arr"></slot>
  data() {
  	return {
  		arr: [1,2,3]
  	}
  }
  
  
  <Son>
  	<template slot-scope="slot">
  		<ul>
        <li v-for="(item) in slot.arr"></li>
      </ul>
  	</template>
  </Son>
  

scoped

style标签上的一个属性，加了scoped的style标签里面的样式，只会在当前组件进行查找，不加页面所有匹配的都会找到

鄙视题

1. 如何理解虚拟dom 和 diff算法

   虚拟Dom仅仅是程序员用js的对象来模拟真实dom结构

   diff算法，比较新旧两颗dom树的不同，进行针对性的局部渲染

2. 组件的data为什么必须是一个函数

   答：如果组件的data是一个对象的话，有可能改了某一个组件的data，会造成其他组件的data跟着一起改变，违背了组件的data应该是相互独立的，互不影响的

   // 组件的data如果是一个对象会有什么问题
   function Component() { }
   Component.prototype.data = {
     a: 1,
     b: 2
   }
   var comA = new Component()
   var comB = new Component()
   comB.data.a = 3;
   console.log(comA.data) // {a:3 , b:2}
   console.log(comB.data) // {a: 3, b:2}
   

   // 组件是如何通过this来访问data中的数据的
    function Component() {
   
           }
           Component.prototype.data = function () {
               return {
                   a: 1,
                   b: 2,
                   c:3,
                   d: 4
               }
           }
           // 将a放到this的身上
           Component.prototype.init = function () {
               var obj = this.data()
               for(var key in obj) {
                   this[key] = obj[key]
               }
               // 把a和1都变成活的
               // this.a = 1
           }
   
           var comA = new Component()
           var comB = new Component()
           comA.init()
           comB.init()
           console.log(comA.a)