zoukankan      html  css  js  c++  java
  • vue的ref

    $refs

    尽管有props和events,但是仍然需要在JavaScript中直接访问子组件。

    为此可以使用ref为子组件指定一个索引ID。

    注意,ref并不是动态更新的,也就是说不应该绑定变量,而是写一个固定值即可。

    home.vue中添加list组件

    <div class="home">
        <list ref="childList"></list>
        <button @click="getChild()">获取子组件</button>
    </div>

    home.vue中的的方法中,可以直接访问到子组件对象

    import List from '../components/list'
    export default {
        components: { List },
        methods: {
            getChild() {
                // 获取子组件中的数据
                console.log(this.$refs.childList.$data.name);
    
                // 调用子组件中的方法
                this.$refs.childList.test1();
            }
        }
    }

    list.vue组件中的数据:

    export default {
        data() {
            return {
                name: 'list',
                version: '1.0.0'
            }
        },
        methods: {
            test1() {
                console.log('test1');
            },
            test2() {
                console.log('test2');
            }
        }
    }

    子组件向父组件传值

    注意:子组件同样也可以调用父组件中的方法,通过props传值即可
    
    通过此种方法,子组件也可以传值给父组件

    父组件中

    <template lang="html">
        <div class="home">
            <list :func="test3"></list>
        </div>
    </template>
    
    <script>
    import List from '../components/list'
    export default {
        components: { List },
        methods: {
            test3(value) { // 参数value就是子组件传递给父组件的值
                console.log('test3', value);
            }
        }
    }
    </script>
    
    <style lang="css">
    </style>

    子组件中

    <template lang="html">
        <div class="list">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <button @click="userParentFunc()">调用父组件中的方法</button>
        </div>
    </template>
    
    <script>
    export default {
        props: ['func'],
        methods: {
            userParentFunc() {
                this.func('我是子组件中的数据');
            }
        }
    }
    </script>
    
    <style lang="css" scoped>
    </style>
  • 相关阅读:
    网络流24题之圆桌问题
    BZOJ 4276: [ONTAK2015]Bajtman i Okrągły Robin
    网络流24题航空路线问题
    BZOJ1038 瞭望塔
    BZOJ4029 HEOI2015定价
    BZOJ1226 SDOI2009学校食堂
    网络流24题之魔术球问题
    网络流24题之最小路径覆盖问题
    【BZOJ1098】[POI2007]办公楼biu
    BZOJ3065 带插入区间K小值
  • 原文地址:https://www.cnblogs.com/windok/p/13391537.html
Copyright © 2011-2022 走看看