CDN方式使用Vue组件通信

简介: 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>


            </div>
目录
相关文章
|
JavaScript
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
1274 0
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
|
JavaScript 前端开发
浅谈Vue中的12种组件通信方式及理解
个人认为Vue中组件通信思想与React一致,都是单向数据流,高阶流向低阶(父传子),子组件只可通知父组件,此时数据还是在父级变更而不是发生流动。
|
JavaScript
Vue基于$attrs及$listeners实现隔代通信
Vue基于$attrs及$listeners实现隔代通信
43 0
Vue基于$attrs及$listeners实现隔代通信
|
JavaScript
Vue父子组件传值(porvide+inject实现组件通信)
如果我们需要把父组件的值传递给子组件,而且子组件可能存在层层嵌套,那么就可以使用provide+inject的方法来实现组件之间的通信
165 0
Vue父子组件传值(porvide+inject实现组件通信)
|
缓存 JavaScript 前端开发
【测试平台开发】十九、前端vue重构 — computed、watch、组件通信等常用知识整理
【测试平台开发】十九、前端vue重构 — computed、watch、组件通信等常用知识整理
【测试平台开发】十九、前端vue重构 — computed、watch、组件通信等常用知识整理
|
JavaScript
vue父子组件及非父子组件通信
vue父子组件及非父子组件通信
vue父子组件及非父子组件通信
|
JavaScript
Vue中父组件与子组件之间的通信
Vue中父组件与子组件之间的通信
95 0
|
JavaScript
Vue子孙三代的三级组件通信
Vue子孙三代的三级组件通信
179 0
Vue子孙三代的三级组件通信
|
JavaScript
vue再读69-组件通信的几种情况
vue再读69-组件通信的几种情况
63 0
vue再读69-组件通信的几种情况
|
JavaScript
Vue黑科技之组件万能通信方法
Vue黑科技之组件万能通信方法
115 0