zoukankan      html  css  js  c++  java
  • Vue的ref,父节点,获取子节点数据的一个手段

    Vue 语法当中有一个 ref的参数,现在就就介绍一下使用方式,它的目的就是父节点,获取子节点数据的一个手段

    首先我们这里有一个父节点father.vue,在这里我们定义了一个子节点child.vue,并且由父节点定义一个ref为childDatas,父节点需要获取子节点的值,就可以直接通过this.$refs.childDatas里面获取,换句话说,这个childDatas其实就是等于child.vue里面的data()信息,包括里面的方法, 所以当按钮点击的时候,执行test()函数就会从child.vue里面的data()里面获取message的参数,这里会打印333, 所以当你获取一些data()里面没有的参数,自然就会是undefine了

    <template>
        <div>
            <!--测试效果的按钮-->
            <button @click="test()">Test Ref</button>
    
            <!--子节点-->
            <Children ref="childDatas"></Children>
        </div>
    
    
    </template>
    
    <script>
        import Child from './child.vue'
        export default{
            methods:{
                test(){
                    var test = this.$refs.childDatas.message
                    console.log(test)
                }
            },
            components:{
              Children:Child
            }
        }
    
    
            

    child.vue

    <template>
        <div>I am Children</div>
    </template>
    
    <script>
        export default{
            data(){
                return{
                    message:'333'
                }
            }
        }
    </script>
  • 相关阅读:
    程序片段--2的乘方
    Set、Map集合、栈、队列
    Map迭代(六种)
    Struts2标签--控制标签
    线性表
    数据结构笔记(1)
    spingMVC问题小结
    《浪潮之巅》十四章笔记
    《浪潮之巅》十三章笔记
    《浪潮之巅》十二章笔记
  • 原文地址:https://www.cnblogs.com/oscar1987121/p/9604697.html
Copyright © 2011-2022 走看看