子组件 Child.vue
<template>
<div class="child-main">
<button @click="btnClick">子点击</button>
<h3 v-text="text"></h3>
</div>
</template>
<script>
export default {
name: 'Child',
props: {
text: {
type: String,
default: '传个值试试!!!'
}
},
data() {
return {}
},
methods: {
// 这是方法
getChildHello() {
alert('hello')
},
// 点击事件
btnClick() {
this.$emit('btn-click', 'hi');
}
}
}
</script>
<style lang="stylus" scoped>
.child-main {
background:red;
width: 250px;
height: 100px;
}
</style>
说明:
1、代码第 26 行,使用 $emit 抛出一个 btn-click 事件;
父组件 Parent.vue
<template>
<div class="parent-main">
<!-- 要挂载的子组件 id -->
<div id="childContainer"></div>
</div>
</template>
<script>
import Vue from 'vue'
import Child from '../components/Child.vue'
export default {
name: 'Parent',
data() {
return {}
},
mounted() {
// 使用基础 Vue 构造器,创建一个“子类”
let ChildTemplate = Vue.extend(Child);
// 创建 ChildTemplate 实例,并挂载到指定 id 上
let childVue = new ChildTemplate().$mount(`#childContainer`);
// 传入 props text 的值
childVue.$props.text = '父组件传入的值!!!';
// 调子组件方法
childVue.getChildHello();
// 监听子组件的 btn-click 自定义事件
childVue.$on('btn-click', (msg) => {
alert(msg);
});
}
}
</script>
<style lang="stylus" scoped>
.parent-main {
background:#ccc;
width: 300px;
height: 200px;
padding: 30px;
}
</style>
说明:
1、代码第 4 行,id 为 childContainer 是要挂载的位置;
2、代码第 8 - 9 行,import 子组件,但无需在属性 components 中注册;
3、代码第 16 - 19 行,将子组件挂载到父组件中 id 为 childContainer 的位置;
4、代码第 21 行,传入 props text 的值;
5、代码第 23 行,调子组件方法 getChildHello;
6、代码第 24 - 27 行,使用 $on 监听听在组件抛出的 btn-click 事件;
知识点
效果
注意
指定的 <div id="childContainer"> 被替换为子组件