Vue 消息传递

最新推荐文章于 2024-07-24 09:14:38 发布

白竹

最新推荐文章于 2024-07-24 09:14:38 发布

阅读量565

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_37627774/article/details/108104781

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

1. [Vue warn]: Avoid mutating a prop directly since the value will be overwritten问题

2. 获取父组件数据，在子组件中修改，再传到父组件中。

Vue点击子组件进行+1操作。

2.1. 方法一.创建data或computed值代替修改prop值（官方推荐）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <script src="../vue.js"></script>
</head>

<body>
  
  <!-- 子组件模板 -->
  <template id="cpn1">
    <div>
      <h2 @click='c_click'>子组件：{{c_counter}}</h2>
    </div>
  </template>

  <!-- 父组件模板 -->
  <div id="app">
    <cpn :c_counter='counter' @itemclick='getcpnclick'></cpn> <!--自动从子组件事件传过来-->
    <h2>父组件：{{counter}}</h2>
  </div>

  <script>

    const cpn = {
      template: '#cpn1',
      props:{
        c_counter: {
          type: Number,
          default: 111
        }
      },
      data(){
        return {
          d_c_counter: this.c_counter,
        }
      },
      methods: {
        c_click(){
          // let c_mid_counter = this.c_counter+1;// 不能直接修改c_counter,不知道为什么。修改prop数据就会报错？？
          this.d_c_counter++;
          this.$emit('itemclick', this.d_c_counter) // 子组件发射事件给父组件
        }
      }
    }

    new Vue({
      el: "#app",
      components: {
        cpn // 全局组件
      },
      data: {
        counter: 0
      },
      methods: {
        getcpnclick(c){
          this.counter = c;
        }
      }
    });
  </script>
</body>

</html>

2.2.方法二.使用中间值（我自己想的，不是官方推荐方法）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <script src="../vue.js"></script>
</head>

<body>
  
  <!-- 子组件模板 -->
  <template id="cpn1">
    <div>
      <h2 @click='c_click'>子组件：{{c_counter}}</h2>
    </div>
  </template>

  <!-- 父组件模板 -->
  <div id="app">
    <cpn :c_counter='counter' @itemclick='getcpnclick'></cpn> <!--自动从子组件事件传过来-->
    <h2>父组件：{{counter}}</h2>
  </div>

  <script>

    const cpn = {
      template: '#cpn1',
      props:{
        c_counter: {
          type: Number,
          default: 111
        }
      },
      methods: {
        c_click(){
          let c_mid_counter = this.c_counter+1; // 不能直接修改c_counter,不知道为什么。修改prop数据就会报错？？
          this.$emit('itemclick', c_mid_counter) // 子组件发射事件给父组件
        }
      }
    }

    new Vue({
      el: "#app",
      components: {
        cpn // 全局组件
      },
      data: {
        counter: 0
      },
      methods: {
        getcpnclick(c){
          this.counter = c;
        }
      }
    });
  </script>
</body>

</html>

2.3. 方法三.更换事件达到类似效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <script src="../vue.js"></script>
</head>

<body>
  
  <!-- 子组件模板 -->
  <template id="cpn1">
    <div>
      <h2>子组件：{{c_counter}}</h2>
      <input :value='c_counter' @input='getinput'>
    </div>
  </template>

  <!-- 父组件模板 -->
  <div id="app">
    <cpn :c_counter='counter' @iteminput='getcpninput'></cpn> <!--自动从子组件事件传过来-->
    <h2>父组件：{{counter}}</h2>
  </div>

  <script>

    const cpn = {
      template: '#cpn1',
      props:{
        c_counter: {
          type: Number,
          default: 111
        }
      },
      data(){
        return {
          d_c_counter: this.c_counter,
        }
      },
      methods: {
        getinput(event){
          console.log(this.d_c_counter+'---'+event)
          this.d_c_counter = event.target.value
          this.$emit('iteminput', this.d_c_counter);
        }
      }
    }

    new Vue({
      el: "#app",
      components: {
        cpn // 全局组件
      },
      data: {
        counter: 0
      },
      methods: {
        getcpninput(val){ // 默认为String类型，做一下转换
          this.counter = parseFloat(val);
        }
      }
    });
  </script>
</body>

</html>