Vue高级

文章内容：

1. bus传参
2. 跨组件传参的常用方法
3. v-model
4. nextTick
5. set
6. 混合

一、bus传参

1. 利用vue空实例跨页面跨足剑传参方式
2. vue bus = new Vue();
3. bus.$on("colorchange",e=>{})
4. bus.$emit("colorchange",'red')
5. bus.$off("移除监听")

// 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

三、v-model

1. 是语法糖,简写模式
:value="w" @input="w=$event"
v=model="w"
2. 在组件中指定v-model
model:{
    prop:"num",
    event:"change"
}

四、nextTick

数据更新,等待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
强制更新

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

六、混合

在每个组件创建完毕,输出当前的时间