vue组件传参

组件传参

• 父子

  通过子组件用props 属性抛出自定义标签属性

    ```html
    	<div id="app">
            {{state}}
            <hr>
           <coma v-bind:test='state' v-bind:test1="message"></coma> <!--2 绑定自定义属性值就是需要传的参数 -->
        </div>
        <template id="c1">
            <div>
                组件c1
                {{test}}<!-- 3 在模板中显示 test -->
                {{test1}}
            </div>
        </template>
        ```
    	```js
           Vue.component("coma",{
               template:"#c1",
               props:["test", "test1"] //1 子组件用props属性抛出一个自定义标签属性
           })
           new Vue({
                el:"#app",
                data:{
                    state:false,
                    message:"nihao"
                },
                methods:{
                    
                }
            })
    
    ```
  

• 子父

  步骤：
  给子组件绑定一个自定义事件
  自定义事件的处理函数 就是父组件的函数
  子组件可以触发自己的自定义事件

  原理：
  给子组件绑定一个自定义事件之后 这个自定义事件的处理函数 就是他所在的父组件的处理函数。
  可以通过vm.$emit(‘name’,[params]) 来触发属于自己的自定义事件

    ```html
    	<div id="app">
            {{message}}
            <hr>
            <com @test="toggle"></com> //1、给子组件绑定一个自定义事件 这个自定义事件触发的函数就是在他所在父组件(app)的的处理函数 
        </div>
        <template id="c1">
            <div>
                这是c1组件
                <button @click="sclick">点击</button> //3、子组件触发子组件本身的函数 在函数中通过vm.$emit（"自定义事件名"[,参数1， 参数2, ...]）
            </div>
        </template>
    ```
    ```js
            Vue.component("com",{
                template:"#c1",
                methods:{
                    sclick(){
                        this.$emit("test","12","34") // 4
                    }
                }
            })
            var app = new Vue({
                el:"#app",
                data:{
                    message:"app"
                },
                methods:{
                    toggle(a,b){ // 2、自定义事件触发的函数
                        console.log("aa");
                        console.log(a,b)
                    }
                }
            })
    ```
  

• 兄弟（相邻兄弟 搁的老远兄弟）

  1 有一个共同的父元素 结合 父子porps传参 子父自定义事件

    原理： 通过一个公有的父元素作为桥接（实例 组件）
  

  2 创建一个中间实例的方式作为桥接作用

    //创建实例
    // 实例上注册事件  事件的处理函数就是要改变数据的处理函数
    // 触发事件
    /*
    let angel=new vue()
    angel.$on('test',fun) 接受数据组件 设置在data数据发生变化的组件中mounted（）
    angel.$emit('test',[params]) 发送数据组件 设置在要要传值的组件中
    */
    ```html
    	<div id="app">
           <father></father>
        </div>
        <template id="father">
            <div>
                这是father
                <hr>
                <son1></son1>
                <hr>
                <son2></son2>
            </div>
        </template>
        <template id="son1">
            <div>
                这是son1
                <button @click="sclick">触发天使</button><!-- 4 -->
            </div>
        </template>
        <template id="son2">
            <div>
                这是son2
                <p>{{name}}</p>
            </div>
        </template>
        ```
    	```js
            let angel = new Vue(); //1、 起过渡作用
            new Vue({
                el:"#app",
                components:{
                    "father":{
                        template:"#father",
                        components:{
    						//发送数据组件
                            "son1":{
                                template:"#son1",
                                methods:{
                                    sclick(){
                                        angel.$emit("test","son1")//5
                                    }
                                }
                            },
    						//接受数据组件
                            "son2":{
                                template:"#son2",
                                data(){
                                    return {
                                        name:"this is son2"//2、改变一个值 最直接的方法就是在该组价中调用方法改变该值
                                    }
                                },
                                methods:{
                                    change(val){
                                        this.name=val;//3、
                                    }
                                },
    							//在mounted中 立即执行 设置angel.$on("事件名",事件处理函数)
                                mounted(){
                                    angel.$on("test",this.change)//3、
                                }
                            }
                        }
                    }
                }
            })
    	```
  

  3 vuex

两个全局组件

其中一个可以控制另一组件内部div的显示隐藏 
全局组件没有固定的父子关系 通过页面的使用来确定父子关系