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;
                     };
                 });
             }
         }
     });