vue 自定义组件以及与父组件交互

1. 新建templateDiv的文件夹

新建文件

　　templateDiv.vue

　　

<template>
    <div class="templateDiv">
        <div @click="emitToParent(1)">Hello, {{fromParent}} </div>
    </div>
</template>

<script>
    export default {
        props: ["fromParent"],
        data() {
            return {
                msg: "hello vue",
            }
        },
        components: {},
        methods: {
            emitToParent(p) {
                console.log("tell farther ------%o", p)
                this.$emit("emitToParent", p);
            }
        },
        mounted() {
        },
    }
</script>
<style>
</style>

 

　　index.js

import div from './templateDiv.vue'
const templateDiv = {
    install (Vue) {
        Vue.component('templateDiv', div)
    }
}
export default templateDiv

在vue的main.js中引入

import templateDiv from './components/templateDiv'
Vue.use(templateDiv)

在新layout中使用

<templateDiv fromParent="I am farther!!" @emitToParent="fromSon"></templateDiv>

methods中响应

        methods: {
            fromSon(params) {
                console.log("from son ------%o", params)
            },
        }