温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-07-17 10:06:24 来源:网络 阅读:509 作者:茕茕木偶 栏目:web开发
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>
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI