Vue兄弟传值与Vue自定义指令及插件

最新推荐文章于 2024-07-04 15:08:23 发布

MAAAOHAN

最新推荐文章于 2024-07-04 15:08:23 发布

阅读量264

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/MAAAOHAN/article/details/106212063

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

这就是我跟大家分享的东西了，谢谢大家！！！！

MAAAOHAN

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue兄弟传值与Vue自定义指令及插件

Vue兄弟传值与Vue自定义指令vue兄弟传值vue兄弟之间传值不向前两个一样（父传子“props” 子传父“$emit”）,而是用一个实例vue来传值的，往下来看：vue bus = new Vue（<div id="box"> <componenta></componenta> <componentb></componentb> </div><script src="js/vue.js"><
复制链接

扫一扫

专栏目录