vue组件兄弟传值

Vue兄弟传值与Vue自定义指令
vue兄弟传值
vue兄弟之间传值不向前两个一样（父传子“props” 子传父“$emit”）,
而是用一个实例vue来传值的，往下来看：

vue bus = new Vue（

    <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 也允许注册自定义指令。

此外还有好多种参数详情请看

vue自定义插件
1.创建一个插件

//功能
var myPlugin={};
myPlugin.install=function(){
Vue.directive(‘chg’,{
inserted(el){
el.style=“width:100px;height:100px;background:yellow”;
}
2.引用

fgnhgkmi