zoukankan      html  css  js  c++  java
  • Vue的props,子节点,获取父节点的数据的一个方式

    vue的参数里面有一个props, 它是子节点,获取父节点的数据的一个方式

    先看看father.vue,在这里,有一个子节点,是使用自定义的组件child.vue,这个组件的节点名叫Children,里面有一个参数fatherName绑定了name参数,当data()里面的name参数被改变,这里的fatherName会跟着改变,接下来看看child.vue

    father.vue

    <template>
        <div>
            <!--子节点,这里的fatherName 跟 name做了绑定-->
            <Children :fatherName="name"></Children>
        </div>
    </template>
    
    <script>
        import Child from './child.vue'
        export default{
            data(){
              return{
                  name:'John'
              }
            },
            components:{
              Children:Child
            }
        }
    
    
    </script>

    在child.vue组件当中,我们定义了一个按钮,点击之后会从父节点中获取fatherName,但这里必须注意的是,必须要引用父节点的参数,这里才会正常获取到,这里就需要用到props,通过在这里定义了与父节点中一直的参数名,自然在这里就能获取到了

    child.vue 

    <template>
        <div>
            <!--测试效果的按钮-->
            <button @click="test()">Test Ref</button>
        </div>
    </template>
    
    <script>
        export default{
            props:['fatherName'],
            methods:{
                test(){
                    console.log(this.fatherName)
                }
            }
        }
    
    </script>
  • 相关阅读:

    (luogu)[模板]最长公共子序列
    表达式的值
    邮票面值设计
    尼克的任务
    HISTOGRA
    消防局的设立
    青蛙的约会
    产生数
    奇怪的电梯
  • 原文地址:https://www.cnblogs.com/oscar1987121/p/9604921.html
Copyright © 2011-2022 走看看