vue父子传值、调用子组件方法_vue父子同信,父给子穿了一个数组,怎样在data中使用-优快云博客

vue传值

父组件可以使用props把数据传给子组件
子组件可以使用$emit，让父组件监听到自定义事件

<!-- 父组件 -->
<template>
    <div>
        <!-- v-on:test="..."（缩写为@test）  子组件方法 = 父组件方法 -->
        <argument ref="argument" :argumentId='..绑定的值..' :content='..绑定的值..' @test="loading"/>       
    </div>
</template>

<script>
import argument from '...'   // 引入

export default {
    name: '...',
    components: {
      ...       // 注册组件  
    },
    methods: {
        loading(val) {      // val为传过来的值
            ...             // 对val进行处理
        }
        test() {
            // 调用子组件方法
            this.$refs.父组件绑定的ref值.方法
        }
    }
}

</script>


<!-- 子组件 -->
<template>
    <div>
        
        
    </div>
</template>

<script>
export default {
    props: {                    
        // 父传子的方法
        'argumentId': Number,
        'content': String,
        'draft': Number,
        'getArgumentId': Function,
        'home': Object
    },
    
    data () {
        return {
            assignmentTest: ......
        }
    }
    
    methods: {
        load() {
            ...
            // 子传父
            // 对test进行注册('方法名'，参数)
            this.$emit('test', this.assignmentTest)     
            ...
        }
    }
    
}
</script>

vue使用ref调用子组件方法，数据问题（看到了，记下笔记）

问题：在vue父子组件传值过程中，使用ref去调用子组件方法，没有在子组件中使用watch监听来调用调用子组件方法(使用watch就不会有这个问题)

// 父组件
<child :keyword='keyword' ref='child'></child>
<button @click='handlerChild'>调用子组件方法</button>
export default {
  data(){
    return(){
        keyword:''
    }
  },
  methods:{
    handlerChild(){
      this.$refs.child.getKeyWord()
    }
  } 
}
// 子组件
export default {
  props:{
    keyword:String
  },
  methods:{
    getKeyWord(){
      console.log(this.keyword)
    }
  } 
}

期望值：当父组件改变，子组件props接受，父组件调用子组件数据打印传递数据结果：每次子组件打印都是上一次父组件传值过来的值？？？我也一时有点懵，难道props不是实时更新父组件传值过来的值吗？再利用watch监听以下keyword，没问题啊，监听每次都是显示父组件传值过来值，那么问题出在？？？

没错，问题出在了 this.$refs.child.getKeyWord()

vue官网找到：

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：

关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。例如，当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用

如此我们只需要在调用子组件的方法时添加this.$nextTick(callback) 解决

// 父组件
<child :keyword='keyword' ref='child'></child>
<button @click='handlerChild'>调用子组件方法</button>
export default {
  data(){
    return(){
        keyword:''
    }
  },
  methods:{
    handlerChild(){
      this.$nextTick(() => {
          this.$refs.child.getKeyWord()
      })
    }
  } 
}