vue-ref通信

最新推荐文章于 2023-07-22 11:03:37 发布

@Tiramisu

最新推荐文章于 2023-07-22 11:03:37 发布

阅读量207

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_46606159/article/details/105030747

版权

笔记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<input ref="mytext"/> 
this.$refs.mytext

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>
</head>
<body>
    <div id="box">
        <input type="text" ref="mytext">
        <button @click="handleAdd">add</button>
        <child ref="mychild"></child>
    </div>

    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        //子组件
        Vue.component("child", {
            template: `<div>
            child  
          </div>`,

            data() {
                return {
                    childname: "子组件的状态"
                }
            },
            methods: {
                add(data) {
                    console.log("子组件的方法", data)
                }
            }
        })

        var vm = new Vue({
            el: "#box",
            data: {

            },
            methods: {
                handleAdd() {
                    console.log("1111", this.$refs.mychild.childname)
                    this.$refs.mychild.add("孩子听话");
                }
            },
        })
        /*
          1. ref放在标签上， 拿到的是原生节点
          2. ref放在组件上， 拿到的是组件对象
        */
    </script>
</body>
</html>

@Tiramisu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-ref通信

<input ref="mytext"/> this.$refs.mytext<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Examples</title></head><body> ...
复制链接

扫一扫