美文网首页Vue学习Web前端开发
Vue父组件和子组件之间传递数据

Vue父组件和子组件之间传递数据

作者: klmhly | 来源:发表于2018-05-19 19:56 被阅读50次

    一、概念解析

    挂载点: Vue实例的el属性对应的id,vue只会处理挂载点下面包含的内容
    模板: 挂载点下面包含包含的标签就是模板
    实例: 写上挂载点和模板等很多属性

    <div id="root">
        <h1>{{msg}}</h1>
        <span></span>
    </div>
    
     new Vue({              //new 了vue实例
            el:"#root"      //挂载点 id="root"的div,说明这个实例的范围在这个div里包含的内容
    })
    

    1、父组件向子组件传递数据
    父组件通过属性向子组件传递数据
    prop 是父组件用来传递数据的一个自定义属性。
    父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop"

    <div id="app">
        <child message="hello!"></child>
    </div>
     
    <script>
    
    // 子组件
    Vue.component('child', {
      // 声明 props
      props: ['message'],
      template: '<span>{{ message }}</span>'
    })
    
    // 父组件
    new Vue({
      el: '#app'
    })
    </script>
    

    在上面的例子中定义了一个子组件child,子组件的message需要在 props属性里面显示声明,然后父组件通过message属性传了值“hello”,子组件就可以使用。

    2、子组件向父组件传递数据
    子组件向父组件传递数据通过监听 $emit 函数
    订阅者模式:子组件触发一个函数,父组件监听这个函数。最终在父组件里定义函数处理

    <div id="root">
            <div>
                <input v-model="inputValue" type="text">
                <button @click="handleSubmit">提交</button>
            </div>
            <ul>
                <todo-item
                        v-for="(item,index) of list"
                        :key="index"
                        :content="item"
                        :index="index"
                        @delete="handleDelete"      
                ></todo-item>
            </ul>
        </div>
    
    <script>
        //子组件
        //子组件的模板是template定义的标签范围
        Vue.component('todo-item',{
            props:['content','index'],          //定义props,接收父组件传递的属性
            template:'<li @click="handleClick">{{content}}</li>',
            methods:{
                handleClick:function () {
                    this.$emit('delete',this.index);   //当点击子组件的li触发delete事件
                }
            }
        })
    
        //父组件
        //父组件没有写template的内容,则它的模板就是挂载点容器下面包裹的所有
        new Vue({
            el:"#root",    //挂载点是id="root"的容器
            data:{
                inputValue:'',
                list:[]
            },
            methods:{
                handleSubmit:function () {
                    this.list.push(this.inputValue);
                    this.inputValue=''
                },
                handleDelete:function (index) {
                    this.list.splice(index,1)
                }
            }
        })
    </script>
    

    ···
    在上面的代码里定义了,父组件、子组件。父组件通过props的方式向子组件传递数据,子组件通过触发事件的方式向父组件传递参数
    下面三行代码是子组件向父组件传递参数的核心

    解释说明:
    @delete="handleDelete"          //父组件监听delete事件
    
    this.$emit('delete',this.index);      //子组件发布delete事件,并且传递数据给父组件
    
    handleDelete:function (index) {      //当父组件监听到时,拿到子组件带来的数据,进行的函数操作
                        this.list.splice(index,1)
                    }
    
    

    相关文章

      网友评论

        本文标题:Vue父组件和子组件之间传递数据

        本文链接:https://www.haomeiwen.com/subject/arladftx.html