master

分支 (1)

管理

管理

master

front-end-development-learning
/
组件6ref.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 引入vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1 ref="mycom2">{{msg}}</h1>
            <button @click="getElement">获取子组件元素</button>
            <com1 ref="mycom1"></com1>


        </div>
        <template id = "temp1">
            <div>
                <h1>子组件:  {{m}}</h1>
                <button >子组件按钮</button>
            </div>
        </template>
    </body>
    <script>
        // 实例化vue对象
        let vm = new Vue({
            // 绑定对象
            el:'#app',
            data:{
                msg:'hello vue.js'
            },
            methods:{
                getElement(){
                    this.$refs.mycom1.m='子组件的值被父组件获取并修改'
                    console.log(this.$refs.mycom2.innerText)
                }
            },
            components:{
                com1:{
                    template:'#temp1',
                    data:function(){
                        return {
                            m:'我是子组件的数据'
                        }
                    }
                }
            }
        })
    </script>
</html>