父子组件数据传递
一、父组件向子组件传递数据
1.1 父组件向子组件传递数据,使用props属性的方式
在子组件中使用props属性进行声明
二、子组件向父组件传递数据
2.1 通过组件的$emit方法;
第一个参数是自定义事件的名字,后面的参数是从子组件传递给父组件的数据,是可选的。要传递几个数据,就将这几个数据作为参数放进该命令中。
// 父组件
<template>
<div>
<child ref="child" @childMethod='handleClick'></child>
</div>
</template>
<script>
import child from './components/child';
export default {
components: {
child
},
methods: {
handleClick(data) {
console.log('子组件向父组件传递的数据', data);
}
}
};
</script>
// 子组件
<template>
<div @click="childMethod">
子组件按钮
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$emit('childMethod', "子组件传递给父组件的数据~");
}
}
};
</script>
三、父组件调用子组件方法
3.1 通过ref直接调用子组件的方法;
// 父组件
<template>
<div>
<child ref="child"></child>
<Button @click="handleClick">点击调用子组件方法</Button>
</div>
</template>
<script>
import child from './components/child';
export default {
components: {
child
},
methods: {
handleClick() {
this.$refs.child.childMethod();
}
}
};
</script>
// 子组件
<template>
<div>
子组件
</div>
</template>
<script>
export default {
methods: {
childMethod() {
console.log('父组件调用子组件方法');
}
}
};
</script>
3.2 通过组件的$emit、$on方法;
// 父组件
<template>
<div>
<child ref="child"></child>
<Button @click="handleClick">点击调用子组件方法</Button>
</div>
</template>
<script>
import child from './components/child';
export default {
components: {
child
},
methods: {
handleClick() {
this.$refs.child.$emit("childMethod"); //子组件$on中的名字
}
}
};
</script>
// 子组件
<template>
<div>
子组件
</div>
</template>
<script>
export default {
mounted() {
this.$nextTick(function() {
this.$on('childMethod', function() {
console.log('父组件调用子组件方法');
});
});
}
};
</script>
四、子组件调用父组件方法
4.1 this.$parent.event;
// 父组件
<template>
<div>
<child></child>
</div>
</template>
<script>
import child from './components/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>
// 子组件
<template>
<div>
<button @click="childMethod()">点击</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$parent.fatherMethod();
}
}
};
</script>
4.2 通过组件的$emit方法;
// 父组件
<template>
<div>
<child @fatherMethod="fatherMethod"></child>
</div>
</template>
<script>
import child from './components/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>
// 子组件
<template>
<div>
<button @click="childMethod()">点击</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$emit('fatherMethod');
}
}
};
</script>
本文来自博客园,作者:爱吃糖的橘猫,转载请注明原文链接:https://www.cnblogs.com/sglblog/p/15978664.html