Vue中父子组件之间传值,兄弟之间传值

组件

1.组件

组件就是把整个页面中局部的一部分抽取出来,可以实现重复使用,组件中包含模板,数据,关系;

使用:

//1.声明一个全局组件
Vue.component('组件名称',{
    data:function(){
        return {};
    },
    template:`模板字符串`,
    methods:{},
    mounted:{}
})
//2.注册局部组件
new Vue({
    el:'',
    data:{},
    components:{
        组件名称:{组件内容}
    }
});
//使用组件
<组件名称></组件名称>

2.组件之间传值

2.1父子传值

//父组件向子组件传递数据
//定义组件
Vue.component('组件名称',{
    props:['形参名称1','形参名称2'],
    data:function(){
        return{};
    },
    template:`模板字符串`,
    methods:{},
    mounted:{}
})
//使用:
<组件名称  参数名称1='值' v-bind:参数名称2='变量名'></组件名称>

 <div id="app">
        <!-- 父组件中的数据 -->
        <div>{{pmsg}}</div>
        <!-- 子组件中的数据 -->
        <menu-item title="来自父组件的值"></menu-item>
        <!-- //动态绑定值 -->
        <menu-item :title="ptitle" content='heeeeeeeee'></menu-item>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //父组件向子组件传值
        
        // 定义一个子组件
        Vue.component('menu-item',{
            //添加props属性  是一个数组
            props:['title','content'],
            data:function(){
                return {
                    msg:'子组件本身的数据'
                }
            },
            template:'<div>{{msg +"====="+title + "=====" + content}}</div>'
        })
        var vm = new Vue({
            el:'#app',
            data:{
                pmsg:'父组件中的值',
                ptitle:'动态绑定的值'
            }
        })

2.2子组件向父组件传值

本质是向父组件传递数据:

1.在父组件引用子组件的语句中监听自定义事件

<组件名称 参数名称="值" v-on:自定义事件名称="处理函数($event)"> </组件名称>

2.在子组件的template中,触发事件

<button v-on:click="$emit('自定义事件名称',携带的数据)">触发事件 </button>

 <div id="app">
        <div :style='{fontSize:fontSize+"px"}'>{{pmsg}}</div>
        <menu-item :parr='arr' v-on:enlarge-text='handle'></menu-item>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //子组件向父组件中传值 
        // props传递数据原则,单项数据流,由父组件向子组件传递
        /*子组件如何向父组件传递数据?
        首先子组件要触发一个自定义事件,同时父组件监听这个事件,当子组件触发自定义事件的时候,
        子组件会把事件会抛向父组件 父组件触发后会指行响应的动作
        */
        Vue.component('menu-item',{
            props:['parr'],
            template:`
                <div>
                    <ul>
                        <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
                    </ul>
                    <button @click='$emit("enlarge-text")'> 扩发父组件中的字体大小</button>
                </div>
            `
        })
        var vm = new Vue({
            el:'#app',
            data:{
                pmsg:'父组件中的内容',
                arr: ['apple','orange','banana'],
                fontSize:10
            },
            methods:{
                handle:function(){
                    //扩大字体
                    this.fontSize+=3;
                }
            }
        })
    </script>

2.3兄弟之间传值

//兄弟之间传值需要借助事件中心进行数据的传递
//1.创建一个事件中心
var hub = new Vue();
//2.接收数据方,要向事件中心注册(绑定事件)
hub.$on('自定义事件名称',事件处理函数)
//3.发送数据方,向事件中心触发事件,并传递参数
hub.$emit('自定义事件名称',参数)
//4.数据接收方解绑事件
hub.$off('自定义事件名称')