轻提示的封装和父子通信

1. 轻提示的封装

（1）时长
（2）关闭
（3）token

2. props和computed（vuex单项数据流）

这两种情况不能直接去修改，否则会报错
子组件的代码：

image.png

<template>
  <div>
    <!-- 父组件 没有异步请求 -->
    <child :userName="userName" @getChild="getChild" />
    <p>父组件userName：{{userName}}</p>
  </div>
</template>
<script>
import child from "./child";
export default {
  components: {
    child
  },
  data() {
    return {
      userName: "炮哥"
    };
  },
  methods: {
    getChild(value) {
      this.userName = value;
    }
  }
};
</script>

  

<template>
  <div>
    <!-- 子组件 -->
    <p>子组件userName：{{userName}}</p>
    <button @click="fn">修改</button>
  </div>
</template>
<script>
export default {
  props: ["userName"],
  data() {
    return {
      editName: ""
    };
  },
  created() {
    this.editName = this.userName;
  },
  methods: {
    fn() {
      this.editName = "1111111";
      this.$emit("getChild", this.editName);
    }
  }
};
</script>

vuex的传值和修改值
我们是不能直接去修改的需要一个新的变量并且把从vuex取到的值赋值给该变量

<template>
  <div>
  <!-- vuex  没有异步请求 -->

    <input type="text" v-model="value" />
    <p>vuex传值----{{demoUserName}}</p>
    <br />
    <button @click="changeVuex">vuex值的修改</button>
  </div>
</template>
<script>
import child from "./child";
export default {
  components: {
    child
  },
  data() {
    return {
      userName: "炮哥",
      value: ""
    };
  },
  created() {
    this.value = this.demoUserName;
  },
  methods: {
    //changeVuex
    changeVuex() {
      this.$store.commit("demoUserName", this.value);
    },
 
  },
  computed: {
    demoUserName() {
      return this.$store.state.demoUserName;
    }
  }
};
</script>
  

如果有异步操作，我们需要使用watch来监听