使用vuex改造vue 组件：父组件向子组件传值，以及子组件向父组件传值

最新推荐文章于 2024-07-12 21:26:02 发布

做最会吹牛的程序猿

最新推荐文章于 2024-07-12 21:26:02 发布

阅读量4.5k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/belonghuang157405/article/details/86534425

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

写在前面：本篇是针对《vue 组件：父组件向子组件传值，以及子组件向父组件传值》使用vuex改造

1.父组件向子组件传值

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <!-- 引入vue.js -->
        <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
        <!-- 引入vuex.js  使用引入js方式 vuex会自动安装，读者如果使用webpack，则参考官网教程-->
       <script type="text/javascript" src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script>
    </head>
    <body>
        <div id="app">
          <my-info></my-info>
        </div>
    
        <template id="test">
            <h2  >{{msg}} ----{{name}}</h2>
        </template>

    </body>
    <script>
        var store = new Vuex.Store({
            //state 相当于vue中的data
            state:{
                msg:" use vuex msg!!!"
            }
        })

        var myInfo = {
            template:'#test',
            data(){
                // 子组件的data数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如组组件通过Ajax请求回来的数据，而后放在了data上，以供使用，data上的数据可读可写
                return { name:"123",msg:this.$store.state.msg}
            }

        };
      let vm = new Vue({
            el:'#app',
            components:{
                //表示的意思 myInfo:myInfo 支持驼峰命名方法 使用时   <my-info></my-info>，也可以用全部小写将不生效驼峰命名
                myInfo
            },
            store //将store实例挂载到store上，表示的意思 store:store
        })
    </script>
</html>

2.子组件向父组件传值

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <!-- 引入vue.js -->
        <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
         <!-- 引入vuex.js  使用引入js方式 vuex会自动安装，读者如果使用webpack，则参考官网教程-->
       <script type="text/javascript" src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script>
    </head>
    <body>
        <div id="app">
          
          <my-info></my-info>
        </div>
    
        <template id="test">
            <div>
              <h2 >{{this.$store.state.msg}}</h2>
              <input type="button" value="点击调用" v-on:click="useParentFunc" />  
            </div>
           
        </template>

    </body>
    <script>

        var store = new Vuex.Store({
            //state 相当于vue中的data
            state:{
                msg:" use vuex msg!!!"
            },
            //mutation 相当于methods 当有操作state中的数据时，在此处编写，并在组件中通过this.$store.commit('useVuexFunc')调用
            mutations:{
                useVuexFunc(state){
                    alert('调用了useVuexFunc的方法 '+state.msg)
                }
            }
        })


        var myInfo = {
            template:'#test',
            methods:{
                useParentFunc:function(){
                    //this.$store.commit调用说明总共只有两个参数： 第一个参数 mutation定义上定义的方法名称，第二个参数指的是传参，参数可以是数组，对象等等
                    this.$store.commit('useVuexFunc')
                }
            }

        };
      let vm = new Vue({
            el:'#app',
            components:{
                //表示的意思 myInfo:myInfo 支持驼峰命名方法 使用时   <my-info></my-info>，也可以用全部小写将不生效驼峰命名
                myInfo
            },
            store //将store实例挂载到store上，表示的意思 store:store
        })
        
    </script>
</html>

做最会吹牛的程序猿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用vuex改造vue 组件：父组件向子组件传值，以及子组件向父组件传值

写在前面：本篇是针对《vue 组件：父组件向子组件传值，以及子组件向父组件传值》使用vuex改造1.父组件向子组件传值&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset='utf-8'&gt; &lt;title&gt;&lt;/title&gt; &lt;!...
复制链接

扫一扫

专栏目录