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

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

做最会吹牛的程序猿

4553人浏览 · 2019-01-18 09:37:12

做最会吹牛的程序猿 · 2019-01-18 09:37:12 发布

写在前面：本篇是针对《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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^