refs属性的使用 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="../vue.js"></script>
<script>
Vue.component('Text',{


    data(){
        return{

        }

    },
    template:`
    <div>
    我是子组件
</div>`,




})

       Vue.component('Test2',{
        data(){
            return {}

        },
        template:`
            <div>我是测试组件2</div>
        `


    })

    let App={
    data(){
        return{

        }
    },
        template:`
        <div>
        <input type="text" ref="input">
        <Text  ref="efg"/>
        <Text2  ref="abc"/>
</div>`,
        mounted(){
        console.log(this.$ref.input);   //获取原始dom
            this.$refs.input.focus()     //获取焦点
            console.log(this.$refs.abc);   //获取组件实例对象

            console.log(this.$refs.abc.$parent);   //获取父组件
            console.log(this.$refs.abc.$root) ; //获取  根组件   Vue实例
            consle.log(this.$root)//获取  根组件   Vue实例
            console.log(this.$children)  //获取儿子

            //循环字典
            for(let key in this.refs){
                console.log($this.$refs[key])
            }
        }
    }
       new Vue({
        el:'#app',
        data(){
            return {

            }
        },
        template:`<App />`,
        components:{
            App
        }

    })


</script>
</body>
</html>

 

posted @ 2018-12-01 16:02  团子emma  阅读(465)  评论(0)    收藏  举报