Vue2 组件间传值

父传子

对象写法

    <!-- 1.创建容器  -->
    <div class="app">
        <h1>我是父组件</h1>

        <hr>
        <!-- 7.应用子组件 10.父组件将数据传递给子组件 :子组件接收变量名=父组件data变量名-->
        <!-- 子组件接收变量名如果是驼峰命名，需要用-分隔两单词，第二个大小写随意 -->
        <my-Component :get-data="num"></my-Component>

    </div>

    <!-- 3.创建模板 -->
    <template id="my_Template">
        <div>
            <h3>我是子组件</h3>
            <!-- 11.子组件使用传过来的数据 -->
            {{getData}}
        </div>
    </template>

    <script>
        // 2.创建vue实例
        const vm = new Vue({
            el:'.app',
            // 8.给父组件添加数据
            data:{
                num:5,
            },
            // 4.创建局部组件
            components:{
                // 5.创建子组件
                'myComponent':{
                    // 6.关联模板
                    template:'#my_Template',
                    // 9.定义props
                    props:{
                        'getData':{
                            type:Number
                        }
                    },
                    
                }
            }
        })
    </script>

数组写法

    <!-- 1.创建容器  -->
    <div class="app">
        <h1>我是父组件</h1>

        <hr>
        <!-- 7.应用子组件 10.父组件将数据传递给子组件 :子组件接收变量名=父组件data变量名-->
        <!-- 子组件接收变量名如果是驼峰命名，需要用-分隔两单词，第二个大小写随意 -->
        <my-Component :get-data="num"></my-Component>

    </div>

    <!-- 3.创建模板 -->
    <template id="my_Template">
        <div>
            <h3>我是子组件</h3>
            <!-- 11.子组件使用传过来的数据 -->
            {{getData}}
        </div>
    </template>

    <script>
        // 2.创建vue实例
        const vm = new Vue({
            el:'.app',
            // 8.给父组件添加数据
            data:{
                num:5,
            },
            // 4.创建局部组件
            components:{
                // 5.创建子组件
                'myComponent':{
                    // 6.关联模板
                    template:'#my_Template',
                    // 9.定义props
                    props:['getData']
                }
            }
        })
    </script>

子传父

    <!-- 1.创建容器 -->
    <div class="app">
        <h1>我是父组件</h1>
        <!-- 16.将父组件数据读取显示 -->
        {{num}}

        <hr>
        <!-- 7.应用子组件 12.调用自定义事件 @子组件自定义事件=父组件计算方法 父组件方法从method调用，不要加括号，这与传统计算方法不同 -->
        <!-- 子组件在自定义事件时不要用驼峰命名法，在使用时一定要用驼峰命名法，并且单词之间不能出现'-',这与父传子有所不同 -->
        <my-Component @sendData="getValue"></my-Component>

    </div>

    <!-- 3.创建模板 -->
    <template id="my_Template">
        <div>
            <h3>我是子组件</h3>
            <!-- 9.给子组件添加触发子传父的方法 -->
            <div @click="send(num)">{{num}}</div>
        </div>
    </template>

    <script>
        // 2.创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                // 14.定义父组件用于接收的变量，初始值为null
                num:null
            },
            // 4.创建局部组件
            components:{
                // 5.创建子组件
                'myComponent':{
                    // 6.关联模板
                    template:'#my_Template',
                    // 8.给子组件添加数据
                    data(){
                        return{
                            num:5
                        }
                    },
                    methods: {
                        // 10.触发子传父
                        send(value){
                            // console.log(value);
                            // console.log(this);          //子组件
                            // 11.为数据绑定自定义事件
                            this.$emit('senddata',value)
                        }
                    },
                }
            },
            methods:{
                // 13.定义接收的计算方法
                getValue(value){
                    console.log(value);
                    // 15.将数据保存在父组件
                    this.num=value
                }
            }
        })
    </script>

点击子组件数据后

爷孙传值

vuex

vue2用vuex3，vue3用vue4
项目下下载vuex
npm i vuex@3

store文件夹为vuex文件夹，相当于一个外置的组件，项目中的所有组件都可以在该组件内拿数据或者修改数据（从某种意义上来说，与js中的prototype有些像）

入口文件main.js

store/index.js

vuex有四个重要的属性：state、getters、mutations分别对应组件的data、computer、methods

读取vuex state数据

直接读取

在组件内

mapState

在组件内

修改数据

同步修改

方法一：$store.commit(事件名，数据)

组件

vuex

方法二 mapMutations

组件

vuex

异步修改数据

组件

vuex

计算结果

组件

vuex

vuex模块

store/index.js

模块

模块数据的读取

vuex 插件 数据持久化

vuex有一个弊端：在页面刷新时保存在vuex的数据会消失因此在每次修改的时候需要将数据重新保存在使用vuex前也需要将数据从本地读取
vue-persistedstate省略了节省了这一步操作
vue-persistedstate 将vuex数据保存在本地
npm i vue-persistedstate

全局事件总线

utils文件夹为全局事件总线配置文件夹
eventBus.js

组件一发送数据

组件二接收数据