vue中父子组件传值以及vuex的使用

最新推荐文章于 2022-11-03 19:29:28 发布

前端.攻城狮

最新推荐文章于 2022-11-03 19:29:28 发布

阅读量2.3k

点赞数 1

分类专栏： vue2 文章标签： vue vuex 父子组件传值

本文链接：https://blog.csdn.net/weixin_45304198/article/details/97005516

版权

vue2 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一，通过属性绑定的方式给子组件传值

 <div id="app">
        <!-- 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
        <com1 v-bind:parentmsg="msg"></com1>
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '123 啊-父组件中的数据'
          },
          methods: {},
    
          components: {
            // 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法
            com1: {
              data() { // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；
                // data 上的数据，都是可读可写的；
                return {
                  title: '123',
                  content: 'qqq'
                }
              },
              template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>',
              // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
              // props 中的数据，都是只读的，无法重新赋值
              props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
              methods: {
                change() {
                  this.parentmsg = '被修改了'
                }
              }
            }
          }
        });
      </script>

二、父组件通过给子组件传递方法的方式来获取子组件的值

<body>
  <div id="app">
    <!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 -->
    <com2 @func="show"></com2>
  </div>

  <template id="tmpl">
    <div>
      <h1>这是 子组件</h1>
      <input type="button" value="这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法" @click="myclick">
    </div>
  </template>

  <script>

    // 定义了一个字面量类型的 组件模板对象
    var com2 = {
      template: '#tmpl', // 通过指定了一个 Id, 表示 说，要去加载 这个指定Id的 template 元素中的内容，当作 组件的HTML结构
      data() {
        return {
          sonmsg: { name: '小头儿子', age: 6 }
        }
      },
      methods: {
        myclick() {
          // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？
          //  emit 英文原意： 是触发，调用、发射的意思
          // this.$emit('func123', 123, 456)
          this.$emit('func', this.sonmsg)
        }
      }
    }


    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        datamsgFormSon: null
      },
      methods: {
        show(data) {
          // console.log('调用了父组件身上的 show 方法: --- ' + data)
          // console.log(data);
          this.datamsgFormSon = data
        }
      },

      components: {
        com2
        // com2: com2
      }
    });
  </script>
</body>

三、vuex

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，可以解决不同组件之间传值的困难
vuex是为了保存组件之间共享数据而诞生的，如果组件之间有要共享的数据，可以直接过载到vuex中，而不必通过父子组件之间传值
props和data和vuex的区别：props是保存了父组件给子组件传的值，data是组件中的私有数据，而vuex是一个全局的数据

我们要怎么用呢

先安装使用命令：npm install vuex --save（安装vuex保存到本地）
导入包 import Vuex from ‘vuex’
注册vuex到vue中 Vue.use(Vuex)

new Vuex.Store() 实例，得到一个数据仓储对象

 var store = new Vuex.Store({
  state: {
    // 大家可以把 state 想象成 组件中的 data ,专门用来存储数据的
    // 如果在 组件中，想要访问，store 中的数据，只能通过 this.$store.state.*** 来访问
    count: 0
  },
  mutations: {
    // 注意： 如果要操作 store 中的 state 值，只能通过 调用 mutations 提供的方法，才能操作对应的数据，不推荐直接操作 state 中的数据，因为 万一导致了数据的紊乱，不能快速定位到错误的原因，因为，每个组件都可能有操作数据的方法；
    increment(state) {
      state.count++
    },
    // 注意： 如果组件想要调用 mutations 中的方法，只能使用 this.$store.commit('方法名')
    // 这种 调用 mutations 方法的格式，和 this.$emit('父组件中方法名')
    subtract(state, obj) {
      // 注意： mutations 的 函数参数列表中，最多支持两个参数，其中，参数1： 是 state 状态； 参数2： 通过 commit 提交过来的参数；
      console.log(obj)
      state.count -= (obj.c + obj.d)
    }
  },
  getters: {
    // 注意：这里的 getters， 只负责 对外提供数据，不负责 修改数据，如果想要修改 state 中的数据，请 去找 mutations
    optCount: function (state) {
      return '当前最新的count值是：' + state.count
    }
    // 经过咱们回顾对比，发现 getters 中的方法， 和组件中的过滤器比较类似，因为 过滤器和 getters 都没有修改原数据， 都是把原数据做了一层包装，提供给了 调用者；
    // 其次， getters 也和 computed 比较像， 只要 state 中的数据发生变化了，那么，如果 getters 正好也引用了这个数据，那么 就会立即触发 getters 的重新求值；
  }
})

将 vuex 创建的 store 挂载到 VM 实例上，只要挂载到了 vm 上，任何组件都能使用 store 来存取数据

总结：

state中的数据，不能直接修改，如果想要修改，必须通过 mutations
如果组件想要直接从 state 上获取数据：需要 this.$store.state.***
如果组件，想要修改数据，必须使用 mutations 提供的方法，需要通过 this.$store.commit(‘方法的名称’，唯一的一个参数)
如果 store 中 state 上的数据，在对外提供的时候，需要做一层包装，那么，推荐使用 getters, 如果需要使用 getters ,则用 this.$store.getters.***

前端.攻城狮

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue中父子组件传值以及vuex的使用

一，通过属性绑定的方式给子组件传值 <div id="app">  <com1 v-bind:parentmsg="msg"></com1> ...
复制链接

扫一扫