文享日志

Vue组件相关

Vue.js JavaScript

发表于2018年05月29日00:21:29

0条评论 135次阅读

Vue组件分为局部组件与全局组件。

局部组件只在某一个Vue实例中才能使用。

全局组件在每个Vue实例中都能使用。


全局组件写法如下:

//创建组件构造器
let Profile = Vue.extend({
     template: `

全局组件

` })


//全局注册组件
Vue.component('my-data', Profile);


//或者这样写
Vue.component('my-data', {
      template: `

全局组件

` })



//为组件中传值
Vue.component('my-data', {
    template: `

{{n}}

`,     data: function() {         return {              n: 1         }     } });

注意:这里的data与创建Vue实例时的data不同,这里data必须是函数。


局部组件写法如下:

//创建组件构造器
let Profile1 = Vue.extend({
    template: `

局部组件

` })


//创建实例
new Vue({
    el: "#iapp",
    components: {
        'i-data': Profile1
    }
})


或者这样写:

new Vue({
    el: "#oapp",
    components: {
        'w-data': {
            template: `
哈哈
`         }     } });


Vue组件嵌套

在一个组件中,嵌套多个组件。


代码示例:

let child1 = Vue.extend({
    template: `
子组件1
` }) let child2 = Vue.extend({     template: `
子组件2
` }) Vue.component('parent', {     components: {         'child1': {             template: `
子组件1
`         },         'child2': {             template: `
子组件2
`         }     },     template: `
父组件:
` })


使用标签来创建组件

可以创建template(推荐)或者script标签,来配置组件模板。

示例如下:

使用template标签

<template id="my-data">

    <div>

        <p>{{msg}}p>

    div>

template>


实例化mydata组件

Vue.component('mydata', {
    template: "#my-data",
    data: () => {
        return {
            msg: 111
        }
    }
});


使用script标签

<script type="text/template" id="my-data2">

    <div>

        <p>我是MT2p>

    div>

script>


Vue.component('mydata2', {
    template: "#my-data2"
})



组件通信

父组件如何向子组件中传递信息,以便定制一些内容呢?

看以下例子:

首先创建三个标签模板

<template id="my-data">

    <div>

        <button @click="count++">点击自增{{count}}button>

    div>

template>


<template id="my-data2">

    <div>

        <p>{{msg}}p>

    div>

template>



<template id="my-data3">

    <div>

        <child1>child1>

        <child2 v-bind:msg='imsg'>child2>

    div>

template>


可以看到,第一个实现的是点击自增效果,第二个是内容展示,第三个是二者的结合。

首先我们看第三个,包含了前两个组件模板。

利用上文提到的内容,很容易写出以下代码:

Vue.component("mydata3", {
    components: {
        child1: {
            template: "#my-data",
            data: () => {
                return {
                    count: 0
                }
            }
        },
        child2: {
            template: "#my-data2",
            props: ['msg']
        }
    },
    template: "#my-data3",
    props: ['imsg']
})

我们看到代码中多了props属性,该属性是实现父向子组件通信的关键。


调用组件示例:

<div id="app">

    <mydata>mydata>

    <mydata2 msg="今天天气好">mydata2>

    <mydata3 v-bind:imsg="test">mydata3>

div>

多层之间的通信需要v-bind动态绑定


实例化Vue

new Vue({
    el: "#app",
    data: {
        test: "多层之间的组件通信"
    }
})


根据上面示例,仔细观察代码,我们会发现,其实父子组件通信关键在于props属性。父组件中props中指定值通过标签中的属性,动态绑定到子组件的props属性指定值中,实现数据传递。


子向父组件通信

实现原理:

        子组件调用自身方法,方法内部进行事件发射,将该次函数调用通知父组件,父组件监听到此事件后,进行相关的数据更新。


示例代码:

创建标签模板

<template id="my-data">

    <div>

        <button @click="pluscount()">点击了{{count}}次button>

    div>

template>


组件注册

Vue.component("mydata", {
    template: "#my-data",
    data: () => {
            return {
                count: 0
            }
    },
    methods: {
        pluscount() {
            this.count++;
            //通知父组件调用了该方法
            this.$emit('pluscount');
        }
    }
})


实例化组件:

new Vue({
    el: "#app",
    data: {
        num: 0
    },
    methods: {
        total() {
            this.num++
        }
    }
})


html代码:

<div id="app">

    <mydata @pluscount="total()">mydata>

    <mydata @pluscount="total()">mydata>

    <p>所有一共点击了{{num}}次p>

div>


👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广