vue使用:onclick_Vue 组件

最新推荐文章于 2024-03-04 09:39:17 发布

车干水寿

最新推荐文章于 2024-03-04 09:39:17 发布

阅读量7.3k

点赞数

文章标签： vue使用:onclick

本文链接：https://blog.csdn.net/weixin_32312913/article/details/113536601

版权

什么是组件

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 js 特性进行了扩展的原生 HTML 元素。

使用组件的好处：

组件是可以复用性的。
易于维护。
有封装性，易于使用。
大型项目中降低组件之间重复性。

注册及使用组件

注册就是利用 component() 方法，先传入一个自定义组件的名字，然后传入这个组件的配置，语法如下所示：

Vue.component(tagName, options)

tagName：组件名。
options ：配置选项。

注册好后，可以通过组件名来使用组件，例如：

<tagName></tagName>

示例：

创建一个自定义组件 comp：

// 注册组件
Vue.component('comp', {
    template: '<h1>这是一个自定义组件!</h1>'
})

然后可以在 Vue 实例挂载的 DOM 元素中使用这个组件：

<body>
    <div id="app">
        <!-- 使用组件 -->
        <comp></comp>
    </div>
    <script>
        // 注册组件
        Vue.component('comp', {
            template: '<h1>这是一个自定义组件!</h1>'
        })
        // 创建实例
        var app = new Vue({
            el:"#app",
        })
    </script>
</body>

局部组件

类似上面那样，使用 Vue.component() 创建的组件，所有的 Vue 实例都可以使用，叫做全局组件。

我们可以在某个 Vue 实例中注册只有自己能使用的组件，这叫做局部组件。

示例：

<body>
    <div id="app">
        <comp></comp>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            components:{
                'comp':{
                    template: `<div>这是一个局部组件，只能在当前Vue实例中使用</div>`,
                }
            }
        })
    </script>
</body>

全局组件和局部组件的区别

使用范围：全局组件可以在页面中任何位置使用，而局部组件只能在定义它的 el 中使用，不能在其他位置，否则就会失效。
定义方法：全局组件可以使用 Vue.component() 定义，而局部组件可以通过 Vue 实例中 component 属性定义局部组件。
是否挂载：全局组件在扩展元素用于封装复用代码时不需要挂载，而局部组件必须手动挂载，否则会失效。
其他：全局组件中代码的编写是”component“ ，而局部组件中是”components“。

属性Props

Vue 组件可以使用 props 属性来声明一个自己的属性，然后父组件就可以往里面传递数据。简单来说就是组件的数据传递。

示例：

首先创建一个组件，然后在组件中声明一个自己的属性：

Vue.component('xkdcomp',{
    template: '<div>这是一个自定义组件，父组件传给我的内容是：{{msg}}</div>',
    props: ['msg']
})

然后再调用该组件：

<body>
    <div id="app">
        <xkdcomp msg="欢迎来到侠课岛！"></xkdcomp>
    </div>
    <script>
        Vue.component('xkdcomp',{
            template: '<div>这是一个自定义组件，父组件传给我的内容是：{{msg}}</div>',
            props: ['msg']
        })
        var app = new Vue({
            el:"#app",
            
        })
    </script>
</body>

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。

除了上面这种使用方式，我们还可以使用 v-bind 指令动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的学习_侠课岛(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div><input v-model="message"> </div>
        
        <xkdcomp v-bind:msg="message"></xkdcomp>
    </div>
    <script>
        Vue.component('xkdcomp',{
            template: '<div>{{msg}}</div>',
            props: ['msg']
        })
        var app = new Vue({
            el:"#app",
            data:{
                message:'你好，欢迎来到侠课岛！'
            }
        })
    </script>
</body>
</html>

Prop 验证

我们可以给组件的 props 属性添加验证，当传入的数据不符合要求时，Vue 会发出警告。

示例：

Vue.component('example', {
  props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组或对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type 可以是下面原生构造器：

String
Number
Boolean
Function
Object
Array
Date
Symbol

自定义事件

通过 prop 属性，父组件可以向子组件传递数据，而子组件的自定义事件就是用来将内部的数据报告给父组件的。

我们可以使用 v-on 绑定自定义事件，每个 Vue 实例都实现了事件接口：

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

示例：

<body>
    <div id="app">    
        <xkdcomp v-on:myclick="onClick"></xkdcomp> + <xkdcomp v-on:myclick="onClick"></xkdcomp> = <span>{{num}}</span>
    </div>
    <script>
        Vue.component('xkdcomp',{
            template: '<button v-on:click="sum">{{ counter }}</button>',
            data() {
                return {
                    counter: 0
                }
            },
            methods: {
                sum() {
                    this.counter += 1
                    this.$emit('myclick')
                }
            },
        })
        var app = new Vue({
            el:"#app",
            data: {
                num: 0
            },
            methods: {
                onClick() {
                    this.num += 1
                }
            }
        })
    </script>
</body>