Vue入门六、slot插槽,$refs,$parent

最新推荐文章于 2024-06-09 08:41:54 发布

weixin_34161083

最新推荐文章于 2024-06-09 08:41:54 发布

阅读量466

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/12012821/2398237

博客介绍了Vue相关知识，包括slot插槽，它是子组件给DOM留的坑位；ref获取子组件实例，通过在子组件或元素上用ref属性，再用this.$refs.xxx获取；以及$parent获取父组件实例，在子组件中用this.$parent即可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、slot插槽

slot就是子组件里给DOM留下的坑位，动态的DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
    var parent = {
        template: `
            <div>
                我是父组件
                <slot name="haah"></slot>
            </div>
        `
        }
    new Vue({
        el: '#app',
        template: `
            <parent>
                <div slot="haah">我是插槽haah</div>
                <div>我也是插槽但是不会显示因为我没有指定slot名称</div>
            </parent>
            `,
        components: {
            parent
        }
    })
</script>
</body>
</html>

2、ref获取子组件实例

a、识别：在子组件或元素上使用属性ref="xxx"
b、获取：this.$refs.xxx获取元素
$el 获得元素DOM

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
    var child = {
        template:`
            <div>我是子组件
                <br>
                <input type="text" v-model="name" value="name">
            </div>
        `,
        data() {
            return {
                name:'123'
            }
        }
    }
    var parent = {
        // 使用子组件
        template: `
            <div>
                我是父组件
                <child ref="childs"></child>
                <button @click="getdata">通过this.$refs操作子组件属性</button>
            </div>
        `,
        // 注册子组件
        components: {
            child
        },
        methods:{
            getdata(){
                this.$refs.childs.name = '456';
            }
        }
    }
    new Vue({
        el: '#app',
        template: `
            <div>
                <parent>
                </parent>
            </div>
            `,
        components: {
            parent
        }
    })
</script>
</body>
</html>

3、$parent获取父组件实例

直接在子组件中使用this.$parent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
    var child = {
        template: `
            <div>我是子组件
            父组件的ID为：{{id}}
            <button @click='getID'>点我获得父组件ID</button>
                <br>
            </div>
        `,
        methods: {
            getID() {
                this.id = this.$parent.msg
            }
        },
        data() {
            return {
                id: ''
            }
        }
    }
    var parent = {
        // 使用子组件
        template: `
            <div>
                我是父组件
                我的ID：{{msg}}
                <child></child>
            </div>
        `,
        // 注册子组件
        components: {
            child
        },
        data() {
            return {
                msg: '123'
            }
        }
    }
    new Vue({
        el: '#app',
        template: `
            <div>
                <parent>
                </parent>
            </div>
            `,
        components: {
            parent
        }
    })
</script>
</body>
</html>

转载于:https://blog.51cto.com/12012821/2398237