Vue 高级方法

一 、v-model

组件上的 v-model默认使用  value值  input事件 来进行内容的双向绑定(也可以自定义值和事件名称)

//默认
<SteperView :value='w' @input="w=$event"></SteperView>
// 简写成如下:
<SteperView v-model="w"></SteperView>
data(){
			return{
				count:this.value
			}
		},
		props:{
			value:{type:Number,default:1}
		},
		watch:{
			// 当count发生改变的时候,发送一个input事件 值为this.count
			"count":{
				handler(){
					this.$emit("input",this.count)
				}
			},
			"value":{
				handler(){
					this.count = this.value
				}
			}
		}
<hr>
//更改value值与input事件
<steper-view2 :num="w" @change="w=$event"></steper-view2>
<steper-view2 v-model="w"></steper-view2>
// 第二种简写要注意
model:{
			prop:"num",//不是props
			event:"change"
		},
		data(){
			return{
				count:this.num
			}
		},
		props:{
			num:{type:Number,default:1}
		},
		watch:{
			// 当count发生改变的时候,发送一个input事件 值为this.count
			"count":{
				handler(){
					this.$emit("change",this.count)
				},
				deep:true
			},
			"num":{
				handler(){
					this.count = this.num
				}
			}
		}

二 、 混合

mixin作用: 多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数会两个都被调用，mixin中的钩子首先执行。

// 每个组件创建完毕后 输出当前时间
// 需要在main.js中写入
Vue.mixin({
	data(){
		return{
			mynum:15,
		}
	},
	created() {
		console.log(this._uid,Date.now(),this)
	}
})

三 、bus传参

 1 、利用vue空实例实现跨页面传参方式

// vue文件 创建实例
<template>
  <div id="app">
    <nav :style="{'backgroundColor':bg}">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
	</nav>
    <router-view/>
  </div>
</template>
// 新建一个js文件
// 导入vue
import Vue from 'vue'
// 创建vue的实例,
var bus = new Vue();
// 在导出实例
export default bus;



// 在app.vue 通过实例传递实例的参数 bg
<button @click="setColor('red')">红</button>
<button @click="setColor('green')">绿</button>
<button @click="setColor('blue')">蓝</button>
import bus from '@/utils/bus.js'
	export default{
		data(){
			return{
				bg:'orange'
			}
		},
		created() {
			// 监听colorchane时间,动态改变bg
			bus.$on("colorchange",$event=>{
				this.bg = $event
			})
			console.log(this.$children)
		}
	}
	//有bus.$on("colorchange",e=>{})
	// bus.$emit("colorchange","red")
	//bus.$off("移除监听")

四 、 跨组件传参的常用方法

1. bus传参
2. $parent父组件
3. $root根组件
4. $refs.myref dom引用
5. vuex
6. cookie/localStorage/sessionStorage

五 、 nextTicker 数据更新,等待dom更新完毕 执行回调函数

// html代码
<h1 id="myh">{{msg1}}</h1>
<h2>{{msg2}}</h2>
//js代码
data() {
			return {
				// num:1
				msg1: "台湾回归",
				msg2: '指日可待',
			}
		},
		methods: {

			getNew() {
				this.msg1 = "祖国统一"
				// 数据更新 ,等待dom也更新执行this.$nextTick的回调函数
				this.$nextTick(() => {
					this.msg2 = document.getElementById("myh").innerText
				})
			},
		}

六 、 set 强制更新试图

// html代码
<ul style="text-align: left;">
			<li v-for="(item,index) in list" :key="index">{{item}}</li>
</ul>
//js代码
data() {
			return {
				list:["天","天","向","上"]
			}
		},
		methods: {
			changeIt(){
				// 强制更新
				this.$set(this.list,3,"下")
				console.log(this.list)
				// vue双向绑定原理,数据更新,试图更新,试图更新,数据更新
				// 数据与视图桥梁是:所有的指令
				// 原理:通过object.definePropery劫持对象的getter获取,setter设置
				// 使用数组的更新,重写了数组的方法原型来实现.push pop split 
			}
		}

Vue.set的使用

调用方法：Vue.set(target，key，value)
target:要更改的数据源（可以是对象或者数组）
key：要更改的具体数据
value：重新赋的值

使用场景：当我们需要动态改变数据的时候

data(){
    return {
    items: [
        {message: 'Test one', id: '1'},
        {message: 'Test two', id: '2'},
        {message: 'Test three', id: '3'}
    ],
}
}

// 修改数据
this.$set(this.items, 0, {message: 'Change Test', id: '10'});

//新增数据
this.$set(this.items, itemLen, {message: 'Test add attr', id: itemLen});