《Vue2.X 进阶知识点》- 单文件(.vue组件)动态挂载到指定位置

最新推荐文章于 2024-01-11 11:57:28 发布

AvatarGiser

最新推荐文章于 2024-01-11 11:57:28 发布

阅读量1k

点赞数 2

分类专栏：《Vue2 进阶知识》文章标签： vue.js javascript

本文链接：https://blog.csdn.net/sinat_31213021/article/details/120490563

版权

《Vue2 进阶知识》专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文通过一个示例详细介绍了Vue中父子组件的通信方式，包括父组件如何向子组件传递数据，子组件如何触发事件并传递信息给父组件。主要涉及的知识点有Vue.extend、vm.$on和vm.$emit的使用，以及如何在实际代码中实现组件的挂载、方法调用和事件监听。

摘要由CSDN通过智能技术生成

子组件 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 事件；