用vue中组件通信,写一个tab选卡.更容易知道组件的通信

最新推荐文章于 2024-01-02 15:35:39 发布

hardwork come on

最新推荐文章于 2024-01-02 15:35:39 发布

阅读量222

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/weixin_43353869/article/details/106723914

版权

vue.js 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

首先知道
**

父子的通信**

1.父子通信是在****父组件中定义自定义属性,在组件通过props来接受

.子父通信

在父组件定义自定义事件，在子组件用$emit,来监听自定义的事件，
在根组件，使用定义的方法
子组件给父组件传递数据
自定义事件
子组件用 $emit() 来触发事件，父组件用 v-on来监听子组件的事件。

第一步：自定义事件
第二步：在子组件中用$emit触发事件。第一个参数是事件名，后边的参数是要传递的数据
第三步：在自定义事件中用一个参数来接收

   <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            width: 60px;
            height: 20px;
            display: inline-block;
        }

        .tenshu {
            width: 100px;
        }

        .active {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 
               在组件中调用方法
               组件可以调用多次
            -->
        <!-- 在父组件传自定义属性   在父组件绑定自定义的事件  @getbian="change" 左边是事件,右边是方法-->
        <my-hello aa="bb" :id="ids" :list="arr" @cha="change"></my-hello>
        <h1>选择的页面:<span class="tenshu" v-text="arr[ids-1].title"></span></h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 注册一个全局的组件   
        /*
           子传父,是通过props来传替的
           在父组件中定义
           (自定义属性,自定义方法),通过props传过去
        */
        Vue.component('my-hello', {
            // key value的形式 props是可以放多个自定义属性
            props: {
                // 自定义属性  aa相当于string
                aa: {
                    type: String,
                    required: true
                },
                //  Invalid prop: type check failed for prop "id". 
                // Expected String with value "1", got Number with value 1. 应该是number的类型而不是字符串类型
                id: {
                    type: Number,
                    // 非必传
                    required: false,
                    // 不传,用默认的
                    default: '2',
                },
                list:{
                    type: Array,
                    required: true
                }
            },
            
            template: `<div>
                          <span 
                             v-for="item in list" 
                             v-text="item.title" 
                             :key="item.id"
                             @click="dianji(item)"
                             :class="{active:item.id==id}"
                             >
                          </span>
                            <br/><br/>        
                       </div>
                       `,
            methods: {
                // [Vue warn]: Invalid handler for event "cli": got undefined  没有这个事件
                dianji(item) {
                    /* Error in v-on handler: "ReferenceError: cha is not defined"
                       found in
                       这里是传自定义的事件   this.$emit(cha) 这种是错误的
                    */
                    //  接受父的自定义事件
                    //  子组件可以传数据
                    var args=Math.random();
                    this.$emit('cha',item,1,2,3,4,5,args);
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            // 声明式变量
            data: {
                ids: 1,
                value: 1,
                arr: [
                        { id: 1, title: '首页' },
                        { id: 2, title: '详情页' },
                        { id: 3, title: '关于页' },
                        { id: 4, title: '列表页' },
                     ]
            },
            methods:{
                change(item,a,b,c,d,e,f){
                    this.ids=item.id
                    console.log('点击了',a,b,c,d,e,f)
                }
            }
            // data(){
            //     return{
            //         arr:[
            //                 {id:1,title:'首页'},
            //                 {id:2,title:'详情页'},
            //                 {id:3,title:'关于页'},
            //                 {id:4,title:'列表页'},  
            //             ]
            //     }
            // },
        }) 
        // 计算属性要有返回值,必须要有return 
        /* 监听器
           计算属性 computed  响应式原理 是依靠缓存的最新的数据     结果的系统
           watch做表单的变化 监听数据的变化,做一些逻辑的变化
           计算属性:依靠Vue响应式系统
           变化响应式的最小值
           使用ref可以获取真实的dom节点
           和$ 的value都是真实的节点
           操作dom消耗性能
           操作dom有3种方法
           js  jq  ref
        */
    </script>
</body>

</html>