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

最新推荐文章于 2023-03-24 08:13:49 发布

weixin_34161083

最新推荐文章于 2023-03-24 08:13:49 发布

阅读量428

点赞数

文章标签： javascript ViewUI

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

版权

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

weixin_34161083

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门六、slot插槽,$refs,$parent

1、slot插槽slot就是子组件里给DOM留下的坑位，动态的DOM<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><scrip...
复制链接

扫一扫