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: "<div><h2>{{title}}</h2><slot></slot><p>{{ count }}</p><button @click='handleClick'>按鈕</button></div>",
        
        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>