Vue组件通信详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41593408/article/details/87996851

// 项目结构

├── index.html
├── main-view.js //父组件
├── desc-view.js //子组件
└── app.js

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>

<body>
    <div id="app">
        <main-view></main-view>
    </div>

    <script type="text/x-template" id="main-view">
        <div>
                <button @click="onChangeDescClick('Android')">Android</button>
                <button @click="onChangeDescClick('IOS')">IOS</button>
                <button @click="onChangeDescClick('Vue')">Vue</button>
                <desc-view  @showCityName="updateCity"  :pushSubDescObj='descObj'></desc-view>
        </div>
    </script>


    <script type="text/x-template" id="desc-view">
        <div>
                <h1>{{pushSubDescObj.title}}</h1>
                <p :style="{fontSize: pushSubDescObj.fontS + 'px'}">{{pushSubDescObj.desc}}</p>
                <button @click='select()'>放大字体</button>
        </div>
    </script>

    <script src="./app.js" type="module"></script>
    <script src="https://vuejs.org/js/vue.js"></script>
</body>

</html>

main-view.js

import {
    descView
} from './desc-view.js'
var mainView = {
    template: '#main-view',
    components: {
        descView
    },
    data: function () {
        return {
            descObj: {
                title: 'Android',
                desc: '这是Android的描述信息',
                fontS: 12
            }
        }
    },
    methods: {
        onChangeDescClick: function (type) {
            this.descObj.title = type;
            this.descObj.desc = '这是' + type + '的描述信息';
        },
        updateCity: function () {
            this.descObj.fontS++;
            console.log(this.descObj.fontS);
        }
    },
    create() {

    }
}

export {
    mainView
};

desc-view.js

var descView = {
    template: '#desc-view',
    props: {
    	//传多个参数
        pushSubDescObj: {
            type: Object,
            default: function () {
                return {
                    title: '这是一个默认的标题',
                    desc: '这是一个默认的内容',
                    fontS : 0
                }
            }
        }
    },
    methods: {
        select: function () {
            this.$emit('showCityName')
        }
    },
    create() {
        
    }
}

export {
    descView
};

app.js

//import {buttonSuccess} from './button-success.js';
import {
    mainView
} from './main-view.js';

var app = new Vue({
    el: '#app',
    components: {
        mainView
    }
})