vue 组件数据传递

vue组件化开发

主要为了把一个大功能拆分成若干个小的功能，解决高耦合问题，同时也方便开发人员维护。

 

从功能上组件可以分为木偶组件和功能组件。

木偶组件（为了接收数据，渲染数据，基本上是没有逻辑的，越往下越木偶）

功能组件（更多是控制数据，有大量的逻辑，越往顶层越功能）

 

组件化开发的优势：

1、提高开发效率

2、方便重复使用

3、便于协同开发

4、更容易管理维护 

 

写法 ：

Vue.component(组件名称，对象){}

 

命名规则：

定义组件名的方式有两种

1）短横线方式 my-component

2）首字母大写方式 MyComponent

但是在HTML模板中尽量使用短横线方式

 

关于组件的几个注意事项：

1、必须放在根实例（new Vue）的上面

2、组件名字与引入组件的名字尽量保持一致

3、template顶层只能有一个div盒子

4、在子组件中，data必须为函数，函数值返回一个对象，对象下面挂数据

 

父级传递子级

首先在子组件上加一个v-bind:自定义属性,等于父级的数据

//比如<ppx v-bind:data="arr"></ppx>
//简写<ppx :data="arr">

子组件通过props来接收数据

//props:['data']

最后使用即可

//{{data}}

注意：

自定义属性不要和子组件数据名称一样

props可以为数字，数组时候传字符串

props可以为对象，为了启用高级配置（传入数据类型的检测和设置默认值）

一般使用对象形式

 

<div id="app">      
     <!-- arr 是父组件的-->      
     <ppx :data="arr"></ppx>
</div>

 let obj = {
       props:['data'],
        template:`
            <ul>
                <li v-for="(val,key) in data">
                    {{val}}
                </li>
            </ul>
        `,
        data(){
            return {
                val:'我是子组件'
            }
        }
   }

   Vue.component('ppx',obj);
   new Vue({
    el:'#app',
    data:{
        arr:[111,222,333]
    }
   });

子级传递父级

在子组件上绑定一个自定义事件，并且传入父级的“事件”处理函数

比如 子组件定义<ppx @customev="changC">，其中changC是父组件定义的

在子组件内部监听这个自定义事件，this.$emit('自定义事件名',参数)

比如

change(){
       this.$emit('customev',id,xxx)
}

vue 组件间传递数据为单向数据流动：

父级把数据传给子级，子级拿到数据后渲染页面，但无权修改父组件传递给它的数据

（父组件通过 props 向下传递数据给子组件，子组件通过 $emit触发父组件的自定义事件 给父组件发送消息）

数据从父级流向子级，数据本身还是父级的。

如果操作子级要改变父级的数据，只能通过子级告知父级要操作哪个数据

然后让父级去修改自己的数据，修改完毕再传给子级

比如checkbox复选框，修改他只能让父级修改，不允许子级修改

 

<div id="app">  
        <h2>父组件</h2>       
       <input type="text" v-model="val" @keyup.13="add" >
       {{arr}}
       <h4>子组件</h4>
       <ppx :data="arr" @changebool="ck"></ppx>
 </div>

let obj={
       props:{
           data:{
               type:Array,
               default:[]
           }
       },
        template:`
            <div>
                <ul>
                    <li v-for="(val,key) in data">
                        <input type="checkbox" @click="changeC(val.id,$event)">
                        <span>{{val.name}}</span>
                    </li>
                </ul>
            </div>
        `,
        methods:{
            changeC(id,ev){
                //自定义的changebool事件，触发时候执行ck
               this.$emit('changebool',id,ev.target.checked);
            }
        }
   }
   Vue.component('ppx',obj);
   new Vue({
    el:'#app',
    data:{
        val:'',
        arr:[
            {
                id:0,
                name:'巴黎',
                checked:false
            },
            {
                id:1,
                name:'东京',
                checked:false
            },
            {
                id:2,
                name:'伦敦',
                checked:true
            },
            {
                id:3,
                name:'悉尼',
                checked:false
            }
        ]
    },
    methods:{
        add(){
            this.arr.push({
                id:+new Date,//隐式类型转换,可以把字符串转成数字类型
                name:this.val,
                checked:false
            });
            this.val = '';
        },
        ck(id,bool){
           this.arr.forEach(e=>{
            //如果当前的id 等于 id 就把当前数据的checked 赋给 bool
            if(e.id === id){
                e.checked = bool;
            }
           })
        }
    }
  });

另一种方法

如果要让子级有功能（操作父级数据的能力），那么可以把父级传进来的数据变成自己的

子级改变自己的数据，是不会影响父级的数据

注意：

如果父级传进来的数据是复合类型（引用类型）的，那么变成自己的数据时，要深拷贝一下，不然改变子级会影响父级

 

 <div id="app">
        <h2>父级的</h2>
            <input type="text" v-model="val" @keyup.13="add">
            {{arr}}
        <hr>

        <h2>子组件</h2>
        <list :data="arr" :k="kk" @getchilddata="changeC"></list>
 </div>

 let obj = {
        template:`
            <div>
                <ul>
                    <li v-for="(val,key) in cd">
                        <input 
                            type="checkbox" 
                            @change="changeFn(val.id)"
                        >
                        <span>{{val.txt}}</span>    
                    </li>    
                </ul>
                {{cd}}
            </div>
        `,
        methods:{
            changeFn(id){
                let b;
                this.cd.forEach(data => {
                    if(data.id === id){
                        data.checked = !data.checked;
                        b = data.checked;
                    }
                });

                this.$emit('getchilddata',id,b);
                console.log(this.cd);

            }
        },
        props:['data','k'],
        data(){
            return {
                cd:JSON.parse(JSON.stringify(this.data))
            }
        }
    }

    Vue.component('list',obj);

    new Vue({
        el:'#app',
        data:{
            kk:'变',
            val:'',
            arr:[
                {
                    id:0,
                    txt:'小明',
                    checked:false
                },
                {
                    id:1,
                    txt:'小红',
                    checked:false
                },
                {
                    id:2,
                    txt:'小刚',
                    checked:false
                }
           ]
        }
        ,methods:{
            add(){
                this.arr.push({
                    id: +new Date,
                    txt:this.val,
                    checked:false
                });
                this.val = '';
            },
            changeC(id,bool){
                this.arr.forEach(e=>{
                    if(e.id === id){
                        e.checked = bool;
                    };
                });
            }
        }
    });