vue 组件之间的传参

• 父组件可以改变子组件的值，而子组件不能直接改变父组件的值！！

1.父组件->子组件 (用props)

父组件 html部分

    <div class="component-study">
        <h1 style="margin-bottom: 30px">component-study</h1>
        <test-one :one="oneValue"></test-one><!--这里往one组件传了one参数-->
        <test-two :two="twoValue"></test-two><!--这里往two组件传了two参数-->
    </div>
复制代码

父组件 js部分

    import testOne from "../template/test-1.vue"//引入子组件one
    import testTwo from "../template/test-2.vue"//引入子组件two
    export default {
        name: 'component-study',
        data(){
            return {
                oneValue:'one',//传到组件one的值
                twoValue:'two'//传到组件two的值
            }
        },
        components:{
            "test-one":testOne,
            "test-two":testTwo
        }
    }
复制代码

子组件 html部分

<template>
    <div class="test-1">
        <div class="title">组件1获取父组件的值:</div>
        <div>{{one}}</div>
    </div>
</template>
复制代码

子组件 js部分

export default {
        name: '',
        props:['one'],//子组件用props接收到了父组件one参数
        data(){
            return {

            }
        },
        created(){
            console.log(this.one);//one  这就是父组件传的值
        }
    }
复制代码

2.子组件->父组件 (用emit)

个人认为：子组件先声明一个方法，然后传值到父组件，父组件然后利用这个方法来获取这个值

子组件 js部分

export default {
        name: '',
        props:['one'],
        data(){
            return {
                sendData:'one',
            }
        },
        created(){
            this.$emit('getOneDataName',this.sendData);//利用$emit来传值，getOneDataName是方法名，this.sendData是传的值
        }
    }
复制代码

父组件 html部分

    <template>
    <div class="component-study">
        <h1 style="margin-bottom: 30px">component-study</h1>
        <test-one @getOneDataName="getOneData" :one="oneValue"></test-one>
        <!--@getOneDataName是子组件声明的方法，记住getOneData没有括号，根据这个方法来获取值-->
    </div>
</template>
复制代码

父组件 js部分

    export default {
        name: 'component-study',
        data(){
            return {
                oneValue:'one',
                twoValue:'two'
            }
        },
        components:{
            "test-one":testOne,
            "test-two":testTwo
        },
        methods:{
            getOneData(data){//这是子组件声明的方法，这个data就是子组件传过来的值
                console.log(25,data);//one
            }
        },
        created(){
            //this.getOneData;
        }
    }
复制代码

3.同级组件传值 利用eventBus

3-1 先在src目录下新建一个 eventBus.js （其实就是一个vue对象）

import Vue from 'vue'

let eventBus = new Vue()

export default eventBus

/*export default{
  eventBus:new Vue()
}*/

复制代码

组件A js部分

    import eventBus from '../assets/js/eventBus'//引入刚刚写的组件
    //利用eventBus $emit注册 一个方法
    eventBus.$emit('testFn','666');//第一个参数是方法名，第二个参数是值
复制代码

组件B js部分

    import eventBus from '../assets/js/eventBus'//引入刚刚写的组件
    //利用eventBus $on获取刚刚注册的方法
    eventBus.$on('testFn',(data)=>{
        console.log(data)//data的值是666
    });
复制代码

子组件->父组件 (v-slot)

v-slot 标题3

转载于:https://juejin.im/post/5afd3b546fb9a07acd4df0e9