2020-05-19

Vue兄弟组件之间传值## 自定义属性

兄弟组件之间用Vue实例传

示例:

```

<div id="app">

<ca></ca>

<cb></cb>

</div>

var bus=new Vue();//定义一个Vue实例

Vue.component('ca',

template:`

<div>

<h1>组件A</h1>

<button @click="sendEvent">发送</button>

</div>

`,

data:function(){

return{

msg:"A组件传B组件"

}

},

methods:{

send(){

bus.$emit('sendEvent',this.msg)

}

}

})

Vue.component('cb',{

template:`

<div>

<h1>组件B</h1>

<p>{{txt}}</p>

</div>

`,

data:function(){

txt: ""

},

mounted(){

var that=this

bus.$on("sendEvent",function(a){

that.txt=a;

})

}

})

```

自定义指令

语法:

Vue.directive('a',

inserted(el){ //生命周期,被绑定元素插入父节点是调用;el是形参,但不能改变

}

)


随机变换颜色示例:

Vue.direvtive('color',{

var num=(Math.random()*100000.toFixed(0))

el.style.background='#'+num

})


Vue.use()主要用于在Vue中安装插件。

插件可以是一个函数也可以是一个对象,如果是对象,必须提供 install()方法。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。