前端之路

Vue组件间传递数据

2018-11-20  本文已影响0人  李不远

组件是Vue很强大的一个功能,所以掌握Vue组件之间的信息传递很重要。大致分为三种常见的情况。

下面我们就这三种情况,分别演示其方法

父组件通过rop向子组件传递数据

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。

<div id="app">
    <my-component title="我是第一个组件"></my-component>
    <my-component title="我是第二个组件"></my-component>
    <my-component title="我是第三个组件"></my-component>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
<script>
    Vue.component('my-component', {
        props: ['title'],
        template: '<h2>{{title}}</h2>'
    })


    new Vue({
        el: '#app',
        data: {},
    })
</script>

通过事件子组件向父组件发送数据

类似于JavaScript的设计模式——观察者模式,dispatchEventaddEventListener。在Vue中,子组件用$emit()来触发事件,父组件用$on() 来监听子组件的事件。

<div id="app">
    <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post
                v-for="post in posts"
                v-bind:key="post.id"
                v-bind:post="post"
                @change="enlargeText"
        ></blog-post>
    </div>
</div>
<script>
    Vue.component('blog-post', {
        props: ['post'],
        template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button @click="$emit('change')">
        增大字号
      </button>
      <div v-html="post.content"></div>
    </div>
  `
    })

    new Vue({
        el: '#app',
        data: {
            posts: [
                {id: 1, title: '我是标题一'},
                {id: 2, title: '我是标题二'},
                {id: 3, title: '我是标题三'}
            ],
            postFontSize: 1
        },
        methods: {
            enlargeText: function () {
                this.postFontSize += 0.1
            }
        }
    })
</script>

使用bus进行兄弟组件传递数据

在兄弟组件进行数据传递时,通常的做法是使用一个空的Vue实例作为中央事件总线:

var bus = new Vue()
//触发组件A中的事件
bus.$emit('id-selected',1)
//在组件B创建的钩子中监听事件
bus.$on('id-selected',function(id){
    //...
})

demo

<div id="app">
    <first-component></first-component>
    <second-component></second-component>
</div>

<script>
    Vue.component('first-component', {
        template: `<div><button @click="handle">点我向b组件传递数据</button></div>`,
        data: function () {
            return {
                aaa: '我是来自A组件的内容'
            }
        },
        methods: {
            handle: function () {
                this.$root.bus.$emit('haha', this.aaa)
            }
        }
    })
    Vue.component('second-component', {
        template: `<div>我是一个组件</div>`,
        created: function () {
            this.$root.bus.$on('haha', function (value) {
                alert(value)
            })
        }
    })
    new Vue({
        el: '#app',
        data: {
            bus: new Vue()
        }
    })
</script>

父链

this.$parent

子链(利用索引)

<my-component ref='xxx'>

this.$refs.xxx

上一篇下一篇

猜你喜欢

热点阅读