CDN方式使用Vue组件通信

代码示例

<div id="app">
    <child @buttonclick="buttonClick" :title="title">插槽会显示这段内容child>
div>


<script src="./vue.js">script>

<script>
	// 定义子组件
    Vue.component("child", {
        // 接收父组件传递过来的参数
        props: ["title"],
        
        data() {
            return {
                count: 0
            }
        },
        
        template: "
{{title}}
{{ count }}
按钮
",
        
        methods: {
            handleClick() {
                this.count++;
                // 向父组件传递事件
                this.$emit("buttonclick", this.count);
            }
        }
    });
	
	// 实例化Vue对象
    var vm = new Vue({
        el: "#app",
        
        data() {
            return {
                title: "父组件传递给子组件的标题"
            }
        },
        
        methods: {
            // 接收子组件传递回来的参数
            buttonClick(count) {
                console.log(count);
            }
        }
    })
script>