Vue组件-refs通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../vue.js"></script>
    <div id="app">
        <input type="text" ref="myText" >
        <button @click="handleClick()">click</button>
        <child ref="child"></child>
    </div>

    <script>

        Vue.component("child",{
            template: `
                <div>child</div>
            `,
            data() {
                return {
                    title: "child title"
                }
            },
            methods: {
                getValue(data) {
                    console.log("从父组件拿到",data)
                }
            }
        })

        let vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                handleClick() {
                    // ref 可以拿到DOM节点
                    // 1.ref 放在标签上，拿到的是原生节点
                    // 2.ref放在组件是，拿到的是组件对象
                    this.$refs.child.getValue(this.$refs.myText.value)
                }
            },
        })
    </script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容