vue组件间的传值方法

父传子,prop(静态传值,动态传值)

   传:   在父组件的子组件标签中定义要传的数据,以键值对方式写入

//父组件father传值


//template模板中

  <div class="father">

    //静态传值(传固定不变的数值或者字符串)
    <son key1='value1' key2='value2'></son>
    
    //动态传值(数据来源本组件的data中定义的数据,会发生变化)
    //此时给键值对的键前面加v-bind,可简写为冒号:
     <son :key1='str' ></son>
  </div>



//vuejs中

    export default {
        data(){
            return{
                str:'动态传的值'
            }
        }
    }

 接:在子组件中利用props数组接收(和data同级)

//子组件son接收


export default {
    //可以用数组
    props:['key1','key2']

    //也可以对象,规定接收的值的类型
    // key1:{
    //   // 描述接收的类型
    //     type:String,
    //    // 必须得传
    //    required:true,
    // }


}

子传父逆向传值,可以利用$emit自定义事件

传:在子组件通过定义一个函数,在函数里使用$emit定义自定义事件

//子组件传值

//template模版中

//在子元素中定义一个函数,在该函数中通过$emit定义自定义事件
<button @click="fun">emit自定义事件</button>



//vue.js中

methods:{
    fun(){
        //写法:this.$emit('自定义事件名',‘传递的参数’)
        this.$emit('hello',‘传递的参数’)
    
    }

}

接:在父组件的子组件标签上，通过添加事件名和回调函数接收数据,回调函数的参数需要和emit传递的参数保持个数一致

//父组件接收


//template模板

<div class="father">
    <son @hello='fun1'></son>
</div>


//vue.js

methods:{
    //子组件中的emit传了几个参数,这里就写几个参数,行参名没规定,个数一致就可以
    fun1(v){
        console.log(v)            //传递的参数
    }
}

兄弟间的传值:事件总线event-bus

实现组件1传值给组件2:

首先在main.js定义一个空的vue实例

//main.js文件

// 添加一个vue实例：
Vue.prototype.$bus = new Vue()

其次,在组件1定义一个自定义事件触发$emit定义自定义事件

//组件1中传值


//template模板

 <button @click="fun">点击</button>


//vue.js上
 methods:{
    fun(){
       this.$bus.$emit('hello','组件1传值给组件2','是兄弟传值')
    }
 }

最后在组件2中接收

//组件2接收值

//vue.js上

// 挂载时触发的函数
mounted(){
    //同样的这里的参数个数也要和组件1中的emit传的参数个数保持一致,
    this.$bus.$on('hello',(v1,v2)=>{
        console.log(v1)        //组件1传值给组件2
        console.log(v2)        //是兄弟传值
    })
}

双向组件传值ref

ref在vue中可以获取dom元素节点,相当于原生js中的document.getElementById

首先在组件1 中定义数据

//组件1

//vue.js上
data(){
    return{
        str:'测试组件间的双向传值'
    
    }
}    

其次,在组件2中使用ref获取组件1的vc组件,通过打点方式可以获取其中数据

//组件2


//template模板

 <mycom1 ref="com2"></mycom1>
 <button @click="fun">点击获取</button>


//vue.js中
    methods:{
        fun(){
            console.log(this.$refs.com2.str);    //测试组件间的双向传值
        }
    }

 

兄弟传值还有集中管理（$root），$parent，vueX等

无关组件传值：路由传参，集中管理，vueX等