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

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

父组件 html部分

    <div class="component-study"><h1 style="margin-bottom: 30px">component-studyh1><test-one :one="oneValue">test-one><test-two :two="twoValue">test-two>div>
复制代码

父组件 js部分

    import testOne from "../template/test-1.vue"//引入子组件oneimport testTwo from "../template/test-2.vue"//引入子组件twoexport 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-studyh1><test-one @getOneDataName="getOneData" :one="oneValue">test-one>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