Vue书写tab切换（父子组件通讯笔记）

最新推荐文章于 2022-12-22 11:54:35 发布

海马体加强中

最新推荐文章于 2022-12-22 11:54:35 发布

阅读量438

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_38722696/article/details/111644125

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .sz-language span {
      padding: 0 15px;
      line-height: 35px;
      display: inline-block;
      border: 1px solid #ccc;
      cursor: pointer;
    }
    .sz-language span.on {
      background: blue;
      color: white;
      border-color: blue;
    }
</style>
<body>
    <div id="app">
        <!-- v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：text 和 textarea 元素使用 value property 和 input 事件；
        checkbox 和 radio 使用 checked property 和 change 事件；
        select 字段将 value 作为 prop 并将 change 作为事件。 -->


        <!--v-model = v-bind:value + v-on:input  -->

        <!-- <sz-language v-model='language' /> -->
        <sz-language :value='language' @input='languageChange'>

    </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>


    /* 父子组件通讯（数据传递）
     1、父组件向子组件传值：使用自定义属性，子组件使用 props 来接收
     2、子组件向父组件传值：使用自定义事件，子组件使用 $emit('自定义事件', data) */



        //自定义组件
        Vue.component('sz-language',{
            template:`
            <div class='sz-language'>
               <span 
               v-for='item in list' 
               :class='{"on":value==item.id}' 
               @click='$emit("input",item.id)' 
               v-text='item.language'>
               </span>
            </div>
            `,
            //自定义属性
            props:['value'],
            data:function(){
                return{
                    list:[
                        {id:1,language:'汉语'},
                        {id:2,language:'英语'},
                        {id:3,language:'德语'},
                        {id:4,language:'法语'},
                        {id:5,language:'日语'},
                        {id:6,language:'韩语'},
                        {id:7,language:'意大利语'},
                        {id:8,language:'俄语'}
                        ]
                    }
                } 
        })
       //根组件
       var app = new Vue({
           el:'#app',
           data:{
            language:1
           },
           methods:{
               languageChange(e){
                   this.language = e
               }
           }
       })
    </script>

</body>
</html>

海马体加强中

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue书写tab切换（父子组件通讯笔记）

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> .sz-language span {
复制链接

扫一扫