vue（访问子组件的方法或属性，$children,$refs）

$children:访问子组件。访问子组件的方法：this.$children[0].ontap()；访问子组件的属性：this.$children[0].name$refs：访问某个特定的子组件，refs指向的是对象，默认值为空{}，使用前必须在组件上面给ref赋值<cpn ref="aaa"></cpn>，使用this.$refs.aaa.name运...

小青龙8085

3273人浏览 · 2019-12-03 11:36:05

小青龙8085 · 2019-12-03 11:36:05 发布

$children:访问子组件。访问子组件的方法：this.$children[0].ontap()；访问子组件的属性：this.$children[0].name

$refs：访问某个特定的子组件，refs指向的是对象，默认值为空{}，使用前必须在组件上面给ref赋值<cpn ref="aaa"></cpn>，

使用this.$refs.aaa.name

运行结果：

实例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
		<style>
			
		</style>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
			<cpn></cpn>
			<cpn ref="aaa"></cpn>
			<cpn></cpn>
			<button @click="onClick">按钮</button>
        </div> 
		<template id="cpn">
			<div>
				<h2>这是一个组件</h2>
			</div>
		</template>
        <script>
            new Vue({
                el:"#root",
                data:{
					
                },
				components:{
					cpn:{
						template:"#cpn",
						methods:{
							ontap(){
								console.log("调用子组件的函数");
							}
						},
						data(){
							return {
								name:"调用指定组件"
							}
						}
					}
				},
                methods:{
                   onClick(){
//						1.chilren
						console.log(this.$children);
						this.$children[0].ontap();
						console.log(this.$children[0].ontap());  //控制台会返回  "调用子组件的函数" 和 undefin

//						2.refs
						console.log(this.$refs.aaa.name);
					}
                },
				computed:{	
					
				},
				filters:{   //过滤器
					
				}
            })
        </script>
    </body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^