vue-props给data赋值仅第一次有效问题

@小朱呀路

已于 2022-11-01 21:19:00 修改

阅读量1.9k

点赞数 2

文章标签： vue.js 前端 javascript

于 2022-11-01 20:46:43 首次发布

本文链接：https://blog.csdn.net/weixin_45441173/article/details/127641029

版权

组件之间的数据是单向流动的子组件不能直接修改传递过来的值(props值只是只读的)
如需修改
方式1：：emit方法传给父组件在修改父组件这个值在进行props传递
方式2：：把props的值进行赋值给data 切记要使用watch监听
注意点:watch监听的时候记得加immedia：true 初始化执行一次
传输的是对象的数据记得使用deep:true深度监听
当把props的对象数据赋给data的时候操作改变data的时候父组件也会受到牵连所以记得进行深拷贝一份

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      {{obj}} <br />
      <my-head title="hello  world" :count="count" :obj1="obj"></my-head>
    </div>
    <script>
      let app = Vue.createApp({
        data() {
          return { count: 20, obj: { name: "zz", age: 20 } };
        },
        mounted() {
          setTimeout(() => {
            this.count = 2000;
            this.obj.name = "000";
          }, 2000);
        },
      });
      app.component("MyHead", {
        props: ["title", "count", "obj1"],
        data() {
          return {
            headcount: "", //这样只会接收到一次props的值  props无论怎么变化我还是使用的第一次的值
            headobj: {},
          };
        },
        // 使用watch监听
        watch: {
          count: {
            immediate: true,
            handler(newvalue, oldvalue) {
              this.headcount = newvalue;
            },
          },
          obj1: {
            immediate: true,
            deep: true,
            handler(newvalue, oldvalue) {
              console.log(newvalue);
              //this.headobj =newvalue;不做拷贝不行接受的是地址值
              this.headobj = JSON.parse(JSON.stringify(newvalue));
              this.headobj.name = "--------";
              console.log(this.headobj, "newvalueobj1");
            },
          },
        },
        template: `
            <header>
            <div>{{title}} {{count}}---{{headcount}}---{{headobj}}</div>
                <h2>logo</h2>
           <ul>
            <li>首页</li>
            <li>音乐</li>
            <li>视频</li>
          </ul>
            </header>

            `,
      });
      let vm = app.mount("#app");
    </script>
  </body>
</html>