子组件调用父组件的数据及方法
程序员文章站
2022-11-05 11:15:12
效果图： ......
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<com1 v-bind:parenting="parentdate"></com1>
<!-- 这里想用调用父组件中的数据，必须为父组件的数据绑定一个名称，并且该名称在子组件中利用props属性进行定义 -->
<com2 @fun="show"></com2>
<!-- 这里同理，为父组件的方法绑定一个别称 -->
</div>
<template id="temp2">
<div @click="myclick">
<h3>这是子组件2</h3>
</div>
</template>
</body>
<script src="node_modules\vue\dist\vue.js"></script>
<script>
let com2 = {
template:'#temp2',
methods:{
myclick(){
//此时利用emit方法来触发父组件传过来的方法
this.$emit('fun');//子组件也可以通过这个方法进行传参操作
}
}
}
let vm = new vue({
el: "#app",
data: {
parentdate: "我是父组件的数据" //子组件不能直接调用父组件中的数据
},
//定义父组件的方法
methods:{
show(){
alert('成功调用了父组件的方法');
}
},
components: {
com1: {
data() {//子组件内数据都是可读可写的
return {
msg: "hello"
}
},
//从父组件获取的数据为只读，不要去修改，。。即使能修改
template: "<h3>{{msg}}这是子组件-----{{ parenting }}</h3>", //绑定并声明完成后即可调用，注意此时的名称为定义的名称
props: ['parenting'] //绑定数据名称的声明
},
com2:com2
}
});
</script>
</html>
效果图：
上一篇： python之路——博客目录