vuecli-组件通信（组件传值）

vuecli-组件通信（组件传值）

组件的传值主要是指：

父子组件传值

以及

兄弟传值

准备2个子组件:Son1.vue，Son2.vue；准备1个父组件：App.vue

Son1.vue---Son1组件中有自己的数据

<template>
    <div>
       <h3>Son1.vue</h3>
       <input type="text" v-model="s1">
       <div>
           fv:
       </div>
       <div>
           s1:{{s1}}
       </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            s1:''
        };
    },
    methods: {
        
    },
};
</script>

<style scoped>

</style>

Son2.vue---Son2组件中没有自己的数据（兄弟组件通信----它的数据是：你Son1.vue组件 先把值 传给 父亲，父亲拿给你的兄弟Son2.vue）

<template>
    <div>
        <h3>Son1.vue</h3>

        <div>
            fv:
        </div>
        <div>
            s1:
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        };
    },
    methods: {
        
    },
};
</script>

<style scoped>

</style>

准备1个父组件：App.vue---父组件有自己的数据

<template>
    <div>
        <h3>App.vue</h3>
        <input type="text" v-model="fv">
        <div>
            fv:{{fv}}
        </div>
        <div>
            s1:{{s1}}
        </div>

        <hr>
        <son-1></son-1>
        <hr>
        <Son2></Son2>
    </div>
</template>

<script>
import Son1 from '@/views/Son1.vue'
import Son2 from '@/views/Son2.vue'
export default {
    data() {
        return {
            fv:'',
            s1:''
        };
    },
    methods: {
        
    },
    components:{
        Son1,Son2
    }
};
</script>

<style scoped>

</style>

单向数据流

数据只能从父组件传递给子组件

子组件 是不会向父组件 直接传递值得

子组件通过$emit 间接的传递

一、父传子

你当前拿到一个标签（组件），设置一个属性

(1).

父组件用属性绑定的形式 拿值，给子组件

:f={{fv}}

(2).

子组件身上 申明 接收父组件 传递过来的值

props{

f:String

}

页面预览，效果如下所示：

二、子传父

子组件通过$emit() 自定义事件，并 将 值 传过去。

页面预览效果，如下所示：

三、兄弟组件通信

你先把值 传给 父亲，父亲拿给你的兄弟