$parent
-
App.vue
<script> import Content from "./components/Content.vue"; export default {data() { return {message: '',}; }, methods:{getChildMsg:function (value){console.log(value); this.message=value } }, components:{Content} } </script> <template> <div> <!-- 拿到子组件 Content 的 msg 数据 --> <!-- 在父组件通过 v -on 监听自定义的子组件的自定义事件 --> <Content @injectMsg="getChildMsg"> </Content> <h2>{{message}}</h2> </div> </template> - Content.vue
<template>
<div>
<!-- 组件是能够复用 -->
<Hello_kugou :message="msg" static='56' :list="list" ref="hellokugou"></Hello_kugou>
<!-- 父子组件拜访形式 , 父组件拜访子组件 $refs $children- 数组类型（vue2）-->
<!-- 子组件拜访父组件 $parent 尽量不必 -->
<!-- 子组件拜访跟组件 $root-->
<p ref="p"></p>
</div>
</template>
<script>
import Hello_kugou from "./Hello_kugou.vue";
export default {data(){// 让每一个组件对象都返回一个对象，不对数据净化
return{
msg: 'hellokugoumsg',
list: [1,2,3],
a: 20
};
},
components:{Hello_kugou},
methods:{
// 在子组件理 $emit 触发事件
sendParent:function (){//this.$emit('事件名称', '发送的事件参数')
this.$emit('injectMsg', this.msg)
}
},
mounted() {//console.log(this.$refs);
},
name: "Content"
}
</script>
<style scoped>
</style>
- Hello_kugou.vue
<template>
<div>
<h2>hello kugou</h2>
<h2>{{message2}}-- 调用父组件的变量 </h2>
</div>
</template>
<script>
export default {data(){
return{a: 10,}
},
name: "Hello_kugou",
//props: ['message', 'static']
props:{
// message: String,// 类型限度
// static: String
message2:{
type:String,
default:"nihhaokugou",
//required:true
},
},
mounted() {console.log(this.$parent.a)
}
}
</script>
<style scoped>
</style>- 拿到了父组件的数据
mounted() {console.log(this.$parent.a)
}