zoukankan      html  css  js  c++  java
  • Vue 传递

    今天刷了一遍Vue的API,做个小笔记
    父子传递数据时,父组件里标记要传的数据,子组件里用props获取,子组件用$emit(‘func’,args)发布事件,父组件用@func接收。
    方法一
    parent.vue:
    enter image description here
    child.vue
    enter image description here
    enter image description here

    方法二
    或者子组件直接用 $props 和 $attrs 进行获取属性

    方法三
    使用$parent/$children

    方法四
    父组件使用,然后this.$refs.name 则可以获取子组件的信息(props等)

    例:
    parent.vue

    <template>
        <div>
            <h1>我是父组件</h1>
            <child ref="child"></child>
        </div>
    </template>
    <script>
        import child from './child'
        export default{
            components:{ child },
            methods:{
                parent(){
                    this.$.refs.child.childFn()
                }
            }
        }
    </script>

    child.vue

    <template>
        <div>
           <h2>我是子组件</h2>
        </div>
    </template>
    <script>
        import child from './child'
        export default{
            components:{ child },
            methods:{
                childFn(){
                    alert('父组件调用了我')
                }
            }
        }
    </script>
  • 相关阅读:
    快排
    Single Number II
    简单工厂和工厂方法
    Implement strStr()
    Linked List Cycle II
    Linked List Cycle
    适配器模式
    Struts2的ActionContext
    javaScript学习随笔
    Tomcat 基本配置(转)
  • 原文地址:https://www.cnblogs.com/geekfeier/p/8981431.html
Copyright © 2011-2022 走看看