淘宝的网站怎么做的好,极客优选网上商城系统,建设通类型的网站,公众号制作流程目录 前言在Vue中#xff0c;通过 ref 属性获取DOM元素使用 ref 属性获取整个子组件#xff08;父组件调用子组件的方法#xff09; 前言 我们接着上一篇文章 03-02-Vue组件之间的传值 来讲。 下一篇文章 05-Vue路由 在Vue中#xff0c;通过 ref 属性获取DOM元素
我们当然… 目录 前言在Vue中通过 ref 属性获取DOM元素使用 ref 属性获取整个子组件父组件调用子组件的方法 前言 我们接着上一篇文章 03-02-Vue组件之间的传值 来讲。 下一篇文章 05-Vue路由 在Vue中通过 ref 属性获取DOM元素
我们当然可以使用JS原生的做法document.getElementById或者 jQuery 来获取DOM但是这种做法却在无形中操作了DOM在Vue框架中并不推荐这种做法。
我们可以通过ref属性获取DOM元素。
ref的英文单词是reference表示引用。我们平时可以经常看到控制台会报错referenceError的错误就和引用类型的数据有关。
在Vue中通过 ref 属性获取DOM元素的步骤
1第一步在标签中给 DOM 元素设置 ref 属性。 h3 idmyH3 refmyTitle 今天天气太好了/h32第二步通过 this.$refs.xxx 获取 DOM 元素
console.log(this.$refs.myTitle.innerText)举例如下
templatediv idapp!-- 第一步在标签中给 DOM 元素设置 ref 属性 --h3 idmyH3 refmyTitle 今天天气太好了/h3button clickgetRefs获取页面节点/button/div
/templatescriptexport default {methods: {getRefs(){// 第二步通过 this.this.$refs.xxx 获取 DOM 元素console.log(this.$refs.myTitle.innerText);}},
};
/script
运行上方代码然后我们在控制台输入vm就可以看到 使用 ref 属性获取整个子组件父组件调用子组件的方法
根据上面的例子我们可以得出规律只要ref属性加在了DOM元素身上我们就可以获取这个DOM元素。
那我们可以通过ref属性获取整个Vue子组件吗当然可以。这样做的意义是在父组件中通过ref属性拿到了子组件之后就可以进一步拿到子组件中的data和method。
父组件代码
templatediv idapp!-- 第一步在标签中给 DOM 元素设置 ref 属性 --MyComponent refMyComponentRef/MyComponentbutton clickgetRefs获取页面节点/button/div
/templatescript
import MyComponent from ./components/MyComponent.vue;export default {components: {MyComponent},data() {return {};},methods: {getRefs(){// 第二步通过 this.this.$refs.xxx 获取 DOM 元素this.$refs.MyComponentRef.handleClick()}},
};
/script
子组件代码
templatediv clickhandleClick这是组件中的内容/div
/templatescript
export default {data(){return{childData: { //定义自组件的数据name: HydeLinjr,age: 26}}},methods: {handleClick() {// 子组件如果要给父组件传递参数在触发 emit 的时候通过参数的形式带出去就可以了// 【第一步】在子组件里我们带两个参数出去传给父组件console.log(this.childData);},},
};
/scriptstyle
/style运行代码点击按钮后效果如下
