zoukankan      html  css  js  c++  java
  • Vue 组件

    定义组件名的方式有两种:

    ①使用 kebab-case
    Vue.component('my-component-name', { /* ... */ })
    当使用 kebab-case (短横线分隔命名) 定义一个组件时,
    你也必须在引用这个自定义元素时使用 kebab-case

    例如

    <my-component-name>

    ②使用 PascalCase

    Vue.component('MyComponentName', { /* ... */ })

    当使用PascalCase(驼峰式命名)定义一个组件时,

    你在引用这个自定义元素时两种命名法都可以使用。

    也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的.

    注意,尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

    传值&传引用:

    传值:String Number Boolean
    
    传引用:Array Object 
    
    (如果传的是引用,改变一个地方的数据,所有跟引用相关的数据都会发生变化。如果传的是值,则不会。)

    父组件向子组件传值:

    
    在组件上绑定属性:v-bind:property="value"
    其中property为绑定的属性名,value为需要传的值(父组件数据中的属性名)
    在子组件里用props:["property"] 接收父组件传的值,其中property为组件上绑定的属性名

    示例:

    父组件:

    data(){
        return {
            test: [{
                name:  "Amor",
                sex: "man",
                age: 18
            }]
        };
    }

    组件(组件名为child):

    <child v-bind:users="test"></child>

    子组件接收值:

    props:["users"]
    props: {
        users: {
            type: Array,
            required:true
        }
    }

    子组件向父组件传值:

    子组件注册事件:

    this.$emit(事件名, value);

    父组件监听事件:

      组件上:
        v-on:事件名="自定义方法名($event)",
        其中$event接收子组件传过来的值,此参数必须为$event
    
    

    示例:

    ①脚手架

    子组件:

    methods: {
        send(){
            this.$emit(change, "我是传递的值!");
        }
    }

    组件(组件名为child)

    <child v-on:change="receive($event)"></child>

    父组件:

    methods:{
      receive(data){
        console.log(data); // "我是传递的值!"
      }
    }

    组件注册&引用:

    全局注册:

    Vue.component('my-component-name', {
      // ... 选项 ...
    })

    局部注册:

    new Vue({
      el: '#app'
      components: {
        'component-a': ComponentA,
        'component-b': ComponentB
      }
    })

    ①脚手架:

    import 自定义组件名1 from '组件1路径';
    import 自定义组件名2 from '组件2路径';

    父组件:

    components: {
      自定义组件名1,
      自定义组件名2
    }

    脚本:

    # 注意:
        data
        类型:Object | Function
        限制:组件的定义只接受 function

    实例:

    # test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="test.js"></script>
    </head>
    <body>
        <div id="test">
            <test v-bind:title="title" v-on:from_child="getValue($event)"></test>
        </div>
    </body>
    </html>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#test",
            data(){
                return {
                    title: "This is Vue.js!"
                };
            },
            methods:{
                getValue:(data)=>{
                    console.log(data);
                }
            }
        });
    </script>

    #test.js

    Vue.component("test",{
        template: ` <div>
                        <p>Hello,world!</p><p>{{test}}</p>
                        <p>{{title}}</p>
                        <button @click="to_parent()">子向父传值</button>
                    </div>`,
        props:["title"],
        data(){
            return {
                test: "Vue.js!"
              };
        },
        methods: {
            to_parent:function () {
                this.$emit('from_child',this.test);
            }
        }
    });

     全局注册组件:

    import YourComponent from 'your-component-path';
    Vue.component('tag-name', YourComponent);
  • 相关阅读:
    android:background背景图片被拉伸问题
    面试积累(String和StringBuffer, StringBuilder的理解)
    面试积累(冒泡排序和选择排序)
    面试积累(java的内存分析)
    面试积累(java配置环境变量)
    异常积累(SQLException)
    【linux】fdisk磁盘分区
    【走马观花】十一月十八日通州雨
    【linux】CentOS查看硬件信息
    【linux】go安装及配置
  • 原文地址:https://www.cnblogs.com/jserhub/p/9222741.html
Copyright © 2011-2022 走看看