浅谈vue组件通信看着篇你就可以应用到项目了

最新推荐文章于 2024-06-11 18:33:10 发布

上上迁

最新推荐文章于 2024-06-11 18:33:10 发布

阅读量86

点赞数

分类专栏：浅谈VUE 文章标签： vue js

上上迁

本文链接：https://blog.csdn.net/aa327056812/article/details/110313406

版权

浅谈VUE 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

文章目录

前言
- 目标
- 关键字
一、定义
二、、使用及场景
参考

前言

不积跬步，无以至千里；不积小流，无以成江海。

目标

掌握基本组件通信

关键字

props，$emit，components

一、定义

使用对应的关键字实现组件之间的通用。

二、、使用及场景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 父模块向自子模块 -->
        <topo  :num="num" :users="users" ></topo>
        <br/>
        <br/>
        <br/>
        <!-- 子模块向父模块 -->
        <topo :count="num" @inc="increment" @dec="decrement" ></topo>
    </div>  
    
    
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        //模块之间的通讯父模块向自子模块，子模块向父模块
        // #父模块向自子模块通讯
        //1 props -> 通过props来接收一个父组件传递的属性
        //2 绑定父模块属性
            // 2.1  方式1 <topo v-bind:num="222"  v-bind:users="[ {id:1, name: '张三'}]" ></topo>
            // 2.2 方式1  <topo  :num="num" :users="users" ></topo>
 
        // # 子模块向父模块(vue提供了一个内置的this.$emit函数，用来调用父组件绑定的函数)
        // 场景子模块变化联动父模块变化
        // 1 子模块创建methods方法，this.$emit("inc")调用父模块，  //inc可以随意变化
        // 2 在<topo :count="num" @inc="increment" @dec="decrement" ></topo>  调用父函数
 

        //局部模块
        const topoTemplate = {
            template:`<div>
                        <h1>{{num}}局部全局模块</h1>
                        <ul>
                           <li v-for="user in users">{{user.id}} : {{user.name}}</li>
                        </ul>
                         <button @click="plus">增加</button>
                         <button @click="reduce">减少</button>
                    </div>
            `,
            data(){
               return {
                   count:2
               }
           },
           props: { // 通过props来接收父组件传递来的属性
                title: String,  
                num: Number, 
                isPublished: Boolean,
                users:{// 这里定义users属性
                          type:Array,// 要求必须是Array类型
                          default:[] // 如果父组件没有传，那么给定默认值是[]
                       },
                author: Object,
                callback: Function,
                contactsPromise: Promise // or any other constructor
                },
                  methods:{
                    plus(){
                      this.$emit("inc");
                   },
                    reduce(){
                      this.$emit("dec");
                   }
                 }
        }
        //vue实例
        new Vue({
            el:"#app",
            data:{
                num:20,
                users:[
                         {id:1, name: '张三'},
                         {id:2, name: '李四'},
                         {id:3, name: '王五'},
                       ]
            },
            //实例化局部模块  两不能一样要不然初始化会失败   topo:topoTemplate     
            components:{
                topo:topoTemplate     
            },
            methods:{ // 父组件中定义操作num的方法
                increment(){
                      this.num++;
                   },
                decrement(){
                      this.num--;
                   }
             }
        });

    </script>
</body>
</html>

参考

vue官方文档

https://cn.vuejs.org/v2/guide/components-props.html

多留言多点赞你们的只支持是我坚持下去的动力，都支棱起来！！！

上上迁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
浅谈vue组件通信看着篇你就可以应用到项目了

文章目录前言目标关键字一、定义二、、使用及场景参考前言不积跬步，无以至千里；不积小流，无以成江海。目标掌握基本组件通信关键字props，$emit，components一、定义使用对应的关键字实现组件之间的通用。二、、使用及场景<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wi
复制链接

扫一扫

专栏目录