bus传参
利用vue空实例实现跨页面跨组件传参方式
bus.js
// 导入vue
import Vue from 'vue';
// 创建vue的实例
var bus = new Vue();
// 导出实例
export default bus;
// about 去控制 App组件的nav的颜色
// bus.$on("事件名",e=>{回调函数}) 监听事件
// bus.$emit("事件名",事件参数) 发送事件
App.vue
<template>
<div id="app">
<nav :style="{'backgroundColor':bg}">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<button @click="$children[2].num+=5">改num</button>
<button @click="$refs.myref.num+=10">加10</button>
</nav>
<router-view ref="myref" />
</div>
</template>
<script>
import bus from '@/utils/bus.js'
export default {
data() {
return {
bg: "orange"
}
},
created() {
// 监听colorchange事件,动态改变bg
bus.$on("colorchange", $event => {
this.bg = $event;
})
console.log(this.$children)
}
}
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
运行结果
跨路由传参
main.js(和上面的App.vue结合)
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
// 全局的,每个组件创建完毕,输出自己,和当前时间
Vue.mixin({
data(){
return {
mynum:15,
}
},
created(){
console.log(this._uid,Date.now(),this);
}
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
v-model
SteperView.vue
<template>
<span>
<button @click="count--">-</button>
<input type="text" v-model.number="count" style="width: 90px;">
<button @click="count++">+</button>
</span>
</template>
<script>
export default{
data(){
return {
count:this.value,
}
},
props:{
value:{type:Number,default:1}
},
watch:{
// 当count发生改变时候,发送一个input事件 值为this.count
"count":{
handler(){
this.$emit("input",this.count)
},
deep:true
},
"value":{
handler(){
this.count = this.value;
}
}
}
}
</script>
<style>
</style>
SteperView2.vue
<template>
<span>
<button @click="count--">-</button>
<input type="text" v-model.number="count" style="width: 90px;">
<button @click="count++">+</button>
</span>
</template>
<script>
export default{
// 指定v-model事件与prop
model:{
prop:"num",
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;
}
}
}
}
</script>
<style>
</style>
HomeView.vue
<template>
<div id="">
<h1>首页 {
{mynum}}</h1>
<steper-view :value="w" @input="w=$event"></steper-view> <br>
<steper-view v-model="w" ></steper-view>
<hr>
<steper-view2 :num="w" @change="w=$event"></steper-view2> <br>
<steper-view2 v-model="w" ></steper-view2>
<!-- v-model="w" 是一种vue语法简写形式 :value="w" @input="w=$event"-->
<div :style="{'border':'1px solid red','width':w+'px','height':w+'px'}"></div>
<button @click="showMe">showMe</button>
</div>
</template>
<script>
import SteperView from '@/components/SteperView.vue'
import SteperView2 from '@/components/SteperView2.vue'
import info from '@/mixin/info.js'
export default {
mixins:[info],
data() {
return {
w: 100,
}
},
components: {
SteperView,SteperView2
},
methods: {
}
}
</script>
运行结果（点击“+”，“-”,红色框的宽度会发生变化，并且四个input的值会同时发生变化）
nextTick,set(强制更新)，混合
nextTick，数据更新,等待dom更执行回调函数
混合，在每个组件创建完毕,输出当前的时间
info.js
export default {
methods:{
showMe(){
console.log("作者:木木,版本V1,lastModify:2016-6-6",this.version)
}
},
created(){
this.version = "1.0";
}
}
<template>
<div class="about">
{
{mynum}}
<hr>
<ul style="text-align: left;">
<li v-for="(item,index) in list" :key="index">{
{item}}</li>
</ul>
<button @click="changeIt">改变</button>
<hr>
<h1 id="myh">{
{msg1}}</h1>
<h1>{
{msg2}}</h1>
<button @click="getNew">新的</button>
<button @click="showMe">showMe</button>
</div>
</template>
<script>
import info from '@/mixin/info.js'
export default {
mixins: [info],
data() {
return {
msg1: "我爱我的祖国",
msg2: "台湾美丽的宝岛",
list: ["学", "好", "前端", "月薪", "过万"]
}
},
methods: {
changeIt() {
// this.list[2] = "js";
// 强制更新
this.$set(this.list, 2, "js");
// this.list.splice(2,1,"js");
console.log(this.list);
console.log(this.list.splice);
// vue双向绑定原理,数据更新,视图更新,视图更新,数据更新
// 数据和视图的桥梁是:vue指令
// 原理:通过Object.definePropery 劫持对象的getter获取,setter设置
// 实现数组的更新,重新数组的方法原型来执行 ,push,pop,split
// vue3双向绑定 使用 proxy代理
},
getNew() {
this.msg1 = "祖国统一！";
// setTimeout(()=>{
// this.msg2 = document.getElementById("myh").innerText;
// },10)
// 数据更新,等待dom也更新后执行this.$nextTick的回调函数
this.$nextTick(() => {
this.msg2 = document.getElementById("myh").innerText;
})
}
}
}
</script>
运行结果
1.未点击触发前
2.点击触发事件（点击‘改变’按钮，‘前端’，被替换为‘js’;点击‘新的’按钮，“我爱我的祖国”,“台湾美丽的宝岛”,都变为 "祖国统一！”）
3.混合（点击“showMe”控制台打印）
