Vue组件通讯小Demo

最新推荐文章于 2024-03-22 21:43:27 发布

小仓桑

最新推荐文章于 2024-03-22 21:43:27 发布

阅读量112

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_43462019/article/details/114272331

版权

VUE 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小测试</title>
</head>
<body>
<div id="app">
    <div style="border: 1px solid red; margin-bottom: 20px">
        <h3>这是一个父组件</h3>
        <h3>子组件发来讯息：{{name}}</h3>
    </div>
    <cpn :cmessage="message" @itemclick="appclick"></cpn>
</div>
</body>
<template id="cpn">
    <div style="border: 1px solid red">
        <h3>这是一个子组件</h3>
        <p>{{cmessage}}</p>
        <button v-for="item in filmlist" @click="cpnclick(item)">{{item.name}}</button>
    </div>
</template>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script type="text/javascript">
    const cpn = {
        template: '#cpn',
        data() {
            return {
                filmlist: [
                    {id: 1, name: '爱情片'},
                    {id: 2, name: '悬疑片'},
                    {id: 3, name: '恐怖片'},
                    {id: 4, name: '伦理片'}
                ]
            }
        },
        props: {
            cmessage: {
                type: String,
                default: ""
            }
        },
        methods: {
            cpnclick(item) {
                this.$emit("itemclick", item);
            }
        }
    }
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello world',
            name: ''
        },
        components: {
            cpn
        },
        methods: {
            appclick(item) {
                this.name = item.name;
            }
        }
    })
</script>
</html>

小仓桑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件通讯小Demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小测试</title></head><body><div id="app"> <div style="border: 1px solid red; margin-bottom: 20px"> <h3.
复制链接

扫一扫

专栏目录