美文网首页
vue子组件如何修改父组件中的变量

vue子组件如何修改父组件中的变量

作者: Mracale | 来源:发表于2021-09-05 14:17 被阅读0次

今天在模拟小面试的时候,面试官提问了一个问题 是除了用子传父的方式 还有那种方式可以让子组件修改父组件中的变量,当时想的是 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定prop 都使得其父子 prop 之间形成了一个单向下行绑定,子组件除了向父组件通过 $emit派发事件 是不能改变父组件中的数据的 后来查了查相关资料 发现在给子组件传数据是加.sync这个修饰符可以修改!

首先是最常见的子传父
子:this.$emit('自定义事件名称', 数据)
在父组件引用子组件的标签上绑定@自定义事件名称='回调函数'
父:methods: { 回调函数() {//逻辑处理 } }
具体代码这里就不演示了

.sync
父组件

<template>
 <div class="home">
<child  :titleSync.sync="title"/>    
<span>{{ '我是父组件:' + title}}</span>
    </div>
  </template>

  <script>
  import Child from '../components/Child'

  export default {
    name: 'home',
    components: {
      Child,
    },
    data() {
      return {
        title: 'sync修饰符',
      }
    }
  }
  </script>
  <template>
    <div>

子组件


 <input type="text" v-model="config">

    </div>
  </template>

  <script>
  export default {
      name: 'Child',
      props: {
        titleSync: String,
      },
      computed: {
        config: {
          get() {
            return this.titleSync
          },
          set(val) {
            this.$emit('update:titleSync', val)
          }
         }
      }
  }
  </script>

相关文章

  • Vue子组件修改父组件的值

    Vue是不允许子组件直接修改父组件的值的,如果需要修改,按如下方式: 子组件 父组件

  • Vue之数据通信

    Vue 如何实现组件通信?①父组件向子组件通信(props:['属性名']) 给父组件中的子组件标签绑定属性,然后...

  • 组件传值(父组件传值给子组件)

    组件传值(父组件传值给子组件)不可在子组件中修改父组件的值,可以通过深拷贝。在子组件中拷贝一份数据app.vue:...

  • vue子组件如何修改父组件中的变量

    今天在模拟小面试的时候,面试官提问了一个问题 是除了用子传父的方式 还有那种方式可以让子组件修改父组件中的变量,当...

  • vue父子组件传递数据方法

    标签(空格分隔): vue 父组件向子组件传递数据 Vue中父组件向子组件传递数据用props 举个例子 父组件中...

  • Vue父子组件传值

    父传子 父组件 Father.vue 子组件 Son.vue 子传父 子组件 Son.vue 父组件 ...

  • vue的父子传值和使用vuex兄弟传值

    在父组件中引入子组件 父传子 父组件 子组件 子传父 子组件 父组件 兄弟传值 兄弟之间可以通过vue官网的方法,...

  • .sync和$attrs

    1. sync 我们都知道vue中有单项数据流的概念,即数据只能有父组件传递给子组件,在子组件中,不能修改父组件的...

  • vue中父子组件传值

    vue中父子组件传值是经常使用的场景 父组件向子组件中传值 父组件 子组件 父组件向子组件中传值分三步1、在父组件...

  • vue中父子传值

    3父组件是App.vue 子组件是one.vue 父子传值 一。父向子: (1)在父组件中引用子组件 (2...

网友评论

      本文标题:vue子组件如何修改父组件中的变量

      本文链接:https://www.haomeiwen.com/subject/knkdwltx.html