精华内容
下载资源
问答
  • 子组件父组件发送数据 //子组件文本框 <input type="text" class="num" :value="item.num" @blur="changeNum(item.id,$event)" maxlength="2"/> //maxlength="2" 将数据限制在两个字符内,初步限制不会超过99...

    如题

    在这里插入图片描述
    需求:

    • 将input 限制在 1-99 之间

    子组件向父组件发送数据

    //子组件文本框
    <input type="text" class="num" :value="item.num" @blur="changeNum(item.id,$event)" maxlength="2"/>
    //maxlength="2" 将数据限制在两个字符内,初步限制不会超过99
    //向父组件传递数据
    methods: {
              changeNum(id, $event) {
                this.$emit('change-num', {
                  id,
                  num: $event.target.value,
                  type: 'change',
                });
              },
    		}
    

    父组件对数据的处理

    //子组件的使用
    <shop-cart-list :list="list" @list-del="listDel($event)" @change-num="changeNum($event)"></shop-cart-list>
    
    //对数据的处理
    methods: {
              changeNum(val) {
                if (val.type == 'change') {
                  this.list.find((item) => {
                    if (item.id === val.id) {
                      //将数据进行了处理,不能为非数字或者 <= 0,如果是就赋值为 1
                      val.num > 0 ? val.num : (val.num = 1);
                      //解决方案就是将父组件的数据进行改变,在重新赋值,数据改变,页面重新更新
                      val.num == item.num ? (item.num = 999) : '';
                      this.$set(item, 'num', val.num);
                    }
                  });
                }
              }
          	}
    

    大致思路:
    当子组件连续多次传递非法的数据,会导致子组件的数据和父组件的数据一致,数据不变化页面不更新,而我的页面没有使用v-model进行双向绑定,而是使用的:value来控制页面的数据显示,所以页面显示的是当前输入的非法数据,没有改变。

    后面了解到官方提供了解决方案:

    changeCount() {
          let val = +parseInt(this.$refs.input.value);
          if (val < 1 || !val) val = 1;
          // 这个函数是用来强制更新用的,用了这个问题就解决了
          this.$forceUpdate();
          this.$emit('changeCount', val);
        },
    
    展开全文
  • 并且这个值,在父组件中更新后,同样会触发子组件更新。 子组件: <template> <div> 子组件展示父组件传入的值:{{timer}} </div> </template> <script> export default { name...

    1、props

    在vue中,父组件,可以将值传递给子组件。并且这个值,在父组件中更新后,同样会触发子组件更新。

    子组件:

    <template>
        <div>
            子组件展示父组件传入的值:{{timer}}
        </div>
    </template>
    
    <script>
        export default {
            name: "child",
            props:['timer'],
        }
    </script>
    
    

    父组件:

    <template>
        <div>
            <h2>父组件中的值:{{fTime}}</h2>
            <!-- 使用子组件 -->
            <child v-bind:timer="fTime"></child>
            
        </div>
    </template>
    
    <script>
    // 导入子组件
        import childchild from "../components/childchildchild.vue";
        export default {
            name: "father",
            components: {
                child,
            },
            data(){
                return{
                    fTime:new Date().getTime()
                }
            },
            created() {
            // 周期性更改父组件中的值
            // 子组件同步进行修改
                setInterval(() => {
                    this.fTime = new Date().getTime();
                }, 2000)
            },
    
        }
    </script>
    

    该种方式,是能将值,从父组件,传递给子组件,而不能逆向传递。如果子组件中的值发生了更改,不会触发父组件刷新视图。

    2、子组件向父组件传递值

    如果希望通过子组件,来改变父组件的值,有这样两种方式:

    • 通过定义全局的事件,父组件进行监听,子组件进行触发,然后更改的值通过事件参数进行传递
    • 给子组件设置一个自定义的事件,子组件触发,然后父组件获取事件参数

    子组件:

    <template>
        <div>
            子组件展示父组件传入的值:{{timer}}
            <button @click="changeTime">子组件中,改变timer 的值</button>
        </div>
    </template>
    
    <script>
        export default {
            name: "child",
            props:['timer'],
            methods:{
                changeTime(){
                    this.$emit('setTime',new Date().getTime())
                }
            }
        }
    </script>
    
    

    父组件

    <template>
        <div>
            <h4>父组件中的值:{{fTime}}</h4>
    <child v-on:setTime="setTimeHandle" v-bind:timer="fTime"></child>
        </div>
    </template>
    
    <script>
        import child from "../components/child.vue";
        export default {
            name: "child",
            components: {
                child,
            },
            data() {
                return {
                    fTime: new Date().getTime(),
                }
            },
            methods: {
                setTimeHandle(e){
                    console.log(e)
                    this.fTime = e;
                },
            },
        }
    </script>
    
    

    点击按钮时,会触发自定义事件,并且将希望改为的值,通过自定义事件传递给父组件,父组件重新复制,会触发子组件刷新

    3、.sync修饰符

    在 vue 2.3 中,为了提供更高效的开发方式,对子组件向父组件通信进行了封装(2 中代码)。使用 .sync 语法糖,代替了原本需要些一大堆的事件监听模式。

    在子组件中,使用this.$emit("update:属性名",新值);来对props 里面被.sync 修饰的值进行修改。

    在父组件中,<child v-bind:属性名.sync="属性值"></child>,使用 b-bind 配合 sync 修饰符

    子组件:

    <template>
        <div>
            子组件展示父组件传入的值:{{timer}}
        </div>
    </template>
    
    <script>
        export default {
            name: "floatMenu",
            props:['timer'],
            mounted() {
                setInterval(()=>{
                    this.$emit("update:timer",new Date().getTime());
                },2000)
            },
        }
    </script>
    
    <style scoped>
    
    </style>
    

    父组件:

    <template>
        <div>
            <h4>父组件中的值:{{fTime}}</h4>
            <child v-bind:timer.sync="fTime"></child>
        </div>
    </template>
    
    <script>
        import child from "../components/child.vue";
    
        export default {
            name: "father",
            components: {
                child,
            },
            data() {
                return {
                    active: "index",
                    fTime: new Date().getTime(),
                }
            },
        }
    </script>
    
    
    展开全文
  • 子组件 props : [“data”], 子组件监听 watch:{ data : (n ,o) =&gt; {//箭头函数 不然会发生this改变 console.log(n.img) this.imgs = n.img } }

    子组件
    props : [“data”],

    子组件监听

    	watch:{
        data : (n ,o) => {//箭头函数  不然会发生this改变
            console.log(n.img)
            this.imgs = n.img
          }
     }
    
    展开全文
  • 子组件更新props中的属性值,并且更新父组件,有两种实现方式:.sync和自定义v-model 1、.sync属性 父组件在给子组件传值时,属性名后需要加修饰符.sync,格式:子组件props属性名.sync 子组件向上弹射事件...

    在子组件中更新props中的属性值,并且更新到父组件,有两种实现方式:.sync 和 自定义v-model

    1、.sync属性

    • 父组件在给子组件传值时,属性名后需要加修饰符.sync,格式 :子组件props属性名.sync
    • 子组件向上弹射事件给父组件时,事件名必须为格式 update:props属性名

    父组件

    <template>
    <div id="app">
        // 注意点一、:show后跟修饰符.sync
        // 等同于<my-componen :show="child" @update:show="val => child= val" />
        <my-component :show.sync='child' />
    </div>
    </template>
    <script>
    export default {
        data(): {
            return {child: false}
        }
    }
    </script>

    子组件

    <template>
        <h3>{{show}}</h3>
        <button @click="eventOn">子组件事件</button>
    </template>
    <script>
    export default {
       props: {
           show: { type: Boolean, default: false}
        } ,
        methods: {
            eventOn() {
                // 注意二、事件名必须为update:属性名
                // 更改prop中的属性show的属性值,同时更新父组件中中child的属性值
                 this.$emit('update:show', false);
            }
        }
    }
    </script>

    2、v-model应用

    • 子组件定义的属性名必须为 value
    • 父组件向上弹射事件给子组件时,事件名必须为 input

    父组件

    <template>
    <div id="app">
       // 等同于<my-componen :value="child" @input="val => child= val" />
        <my-component :value='child' />
    </div>
    </template>
    <script>
    export default {
        data(): {
            return {child: false}
        }
    }
    </script>
    子组件
    <template>
        <h3>{{value}}</h3>
        <button @click="eventOpt">子组件事件</button>
    </template>
    <script>
    export default {
       props: {
         // 注意点一、属性名必须为value
          value: { type: Boolean, default: false}
        } ,
        methods: {
            eventOpt() {
                // 注意二、事件名必须为input
                // 更改prop中的属性value的属性值,同时更新父组件中中child的属性值
                 this.$emit('input', false);
            }
        }
    }
    </script>

    比较

    v-model 子组件只能更改props中的一个属性值value;样例第二种

    .sync 子组件可以更改props中的多个属性值;

    展开全文
  • 方法一(常规) 父组件传递数据子组件子组件数据转成本地数据 props: ['name'], data() { return { ...所以要监听父组件传入数据的变化,随之更新子组件; watch: { // 监听父组件传...
  • 子组件频繁向父组件传值,父组件更新数据 在实际项目中,我们经常遇到这种情况就是父子组件互相通信。 举例:图片上传组件,上传多张图片时,只在页面展示第一张图片,其余不展示,这时并不是所有的数据绑定问题,...
  • 此外,每次父组件数据发生更新时,子组件的值都会更新到最新的数据,但不能直接在子组件内部改变prop(父组件传过来的值),否则浏览器就会发出警告 但我们可能会遇到,需要在子组件修改父组件值的需求,这里...
  • vue父组件数据更新子组件没有变化。 在父子组件传参时,父组件将值传到子组件后,子组件进行数据展示,在第一次传参时可以正常显示,过一段时间后重新赋值,则发现子组件里面数据没有更新,这个时候需要在子组件...
  • VUE父组件子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态。场景:子组件通过props获取父组件传过来的数据子组件存在操作传过来的...
  • vue构建页面的顺序为,父组件构建 → 子组件构建 → 父组件获取异步数据 → 子组件获取父组件异步数据子组件更新,也就是说构建的时候生命周期只会执行一次。父组件父组件:获取数据import child from './...
  • 准备:单向数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向...
  • 正常对于vue父子组件来说子组件是不能改变父组件props过来的值的,但是今天在做项目的时候发现了...子组件直接改变父组件props过来的对象是可以直接更新父组件数据的而且不会报错。 子组件: <template> ...
  • 在您的特定情况下,可以将自定义组件与一起使用v-model。这是一种特殊的语法,允许进行接近双向的绑定,但实际上是上述事件驱动架构的简写形式。这是一个简单的示例:Vue.component('child', {template: '#child'...
  • vue父组件数据更新子组件相关内容未改变 父组件 在父组件中,根据后台给的数据(数组),v-for生成子组件 <div class="exist"> <existProject :itemprop="item" v-for="(item, index) in getData" :...
  • 传值(对象或者数组)到子组件,在编辑页面修改原来的值由于v-model的绑定,我们修改是会直接影响原来的值,当我们取消编辑的时候,这个时候应该是数据变为未编辑之前的值,而当我们确定保存时,父组件中的数据应该...
  • 但是现在问题是父组件数据是异步获取...但是这还不够完美,子组件一般不直接使用父组件传来的值,二是监听一下,然后有变化了的时候再赋值给data,渲染的时候用data里的数据,这样就能保证随时动态更新数据props:...
  • 当在子组件里更改了某些信息且关闭子组件后,需要父组件更新修改后的内容,操作如下: 1、$emit触发 父组件 @update="update(val)" 子组件 this.$emit('update', newVal) 2、使用$parent触发父组件  更新数据是...
  • 生命周期篇1.生命周期四个阶段初始化 (create)--- 组件挂载(mount)-----组件更新 (update)...父组件子组件之间的生命周期执行顺序组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。组件的销毁操作是先父后子...
  • 获取到父组件数据 ``` props: { teacherData: { type: Object } }, ``` -------------------补充------------- 然后子组件向父组件传值 ``` this.$emit('success',false); ``` ``` ...
  • 有时候需要父组件请求接口,然后把数据传递给子组件,页面渲染出来了,接口数据后面才返回出来,这样子组件就不是最新数据,导致页面数据显示错误。 props: { file_list: { type: Array, default() { return [] ...
  • 今天碰到一个vue的问题,父组件子组件传值,在子组件可以打印出接收到的值,但是,子组件没有显示: 两个可能: 1,组件未渲染; 2, 组件渲染了。只是数据是空值,新数据传过来,没有重新渲染; 第一种情况可以...
  • View 代表UI 组件,它负责将数据模型转化成UI 展现出来。ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。在MVVM架构下,View ...
  • 我们要实现的效果是:在子组件的Input框输入,父组件中实时更新显示。(也就是把子组件中的数据传给父组件) 一、子组件代码 template部分 <template> <section> <input v-model="message"/...
  • // 父组件 <template> <div class="father"> <son @hook:update="sonUpdateFun"/> // 我是子组件 </div> </template> <script> import son from './son.vue' export default { components:{ 'son' }, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 491
精华内容 196
关键字:

vue子组件更新父组件数据

vue 订阅