Vue兄弟传值与Vue自定义指令
vue兄弟传值
vue兄弟之间传值不向前两个一样(父传子“props” 子传父“$emit”),
而是用一个实例vue来传值的,往下来看:
vue bus = new Vue(
<div id="box">
<componenta></componenta>
<componentb></componentb>
</div>
<script src="js/vue.js"></script>
<script>
var bus=new Vue();
Vue.component('componenta',{
template:`
<h1>我是组件A</h1>
`,
data:function(){
return{
msg:"我是准备给B的值"
}
},
methods:{
bus.$emit('sendEvent',this.msg); //($emit)传递过去一个自定义事件,跟一个参数
}
})
Vue.component('componentb',{
template:`
<h1>我是组件B</h1>
`,
data:function(){
return{
txt:"" 用来接收传给自己的值
}
},
mounted(){
//不用箭头函数的话可以,声明一个变量,把组件B赋值给他:
//var that = this;
//($on)用于接收传递过来的事件和参数
bus.$on('sendEvent',(msg)=>{ ///这里要用箭头函数,不然this不是指定对象
this.txt=msg;
///that.txt=msg ;
}
}
})
new Vue({
el:"#app"
})
<script>
关于传值还有个小案例:
<div id="app">
<componenta></componenta>
<componentb></componentb>
</div>
<script src="js/vue.js"></script>
<script>
var bus=new Vue();
Vue.component('componenta',{
template:`
<div>
<h1>我是组件A</h1>
<ul class="lista">
<li v-for="(value,index) in list" @click="send(index)">
<img :src="value.url">
<p>{{value.title}}</p>
<p>{{value.price}}</p>
</li>
</ul>
</div>
`,
data:function(){
return{
list:[
{id:1,url:"img/1.jpg",title:"华为p30",price:"300"},
{id:2,url:"img/2.jpg",title:"华为p40",price:"400"},
{id:3,url:"img/3.jpg",title:"华为p50",price:"500"}
]
}
},
methods:{
send(index){
bus.$emit('sendEvent',this.list[index]);
console.log(this.list[index]);
}
}
})
Vue.component('componentb',{
template:`
<div>
<h1>我是组件B</h1>
<img :src="obj.url">
<p>{{obj.title}}</p>
<p>{{obj.price}}</p>
</div>
`,
data:function(){
return{
obj:{}
}
},
mounted(){
bus.$on('sendEvent',(msg)=>{
console.log(msg);
this.obj=msg;
})
}
})
new Vue({
el:"#app"
})
</script>
这是效果图:
vue的自定义指令
除了核心功能默认内置的指令 (v-model
和 v-show
),Vue 也允许注册自定义指令。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-color>好像开学啊</p>
</div>
</body>
<script type="text/javascript">
Vue.directive('color',{ //el 指令所绑定的元素,可以用来直接操作 DOM
inserted(el){ //inserted 被绑定元素插入父节点时调用
var dome=(Math.random()*1000000).toFixed(); //math.random 去随机数,*1000000取一万以内随机数
el.style.backgroundColor="#"+dome; //toFixed 取小数点后几位
}
})
new Vue({
el:"#app"
});
</script>
</html>
此外还有好多种参数详情请看
vue自定义插件
1.创建一个插件
//功能
var myPlugin={};
myPlugin.install=function(){
Vue.directive('chg',{
inserted(el){
el.style="width:100px;height:100px;background:yellow";
}
})
}
2.引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
Vue.use()主要用于在vue中安装插件
//插件函数也可以是一个对象,如果是对象,必须提供install()方法
-->
<div id="app" v-chg>fgnhgkmi</div>
<script src="js/vue.js"></script>
<script src="plugin.js"></script>
<script>
Vue.use(myPlugin);
new Vue({
el:"#app"
})
</script>
</body>
</html>
这就是我跟大家分享的东西了,谢谢大家!!!!