【Vue】父子组件传值

使用组件的意义就在于减少代码量，这里以修改列表为例，演示父子组件传值。

效果：

子组件代码：

<template>
  <div style="margin-left: 20px">
    |----edit----|  name:
    <input v-model="value.name">
    age:
    <input v-model="value.age">
    <button @click="save">save</button>
  </div>
</template>

<script>
    export default {
        name: "Vue04-a",
        data() {
            return {
                value: {
                    id:undefined,
                    name: '',
                    age: undefined,
                }

            }
        },
        methods: {
            save() {
                this.$emit('setItem', this.value)
            }
        },
        props: ['item'],//定义外部使用的属性，对本身来说都是只读的,修改后报错，同时也无法回馈到父组件
        mounted() {
            this.value.id=this.item.id;
            this.value.name=this.item.name;
            this.value.age=this.item.age;
        }
    }
</script>

<style scoped>

</style>

父组件代码：

<template>
<div>
 <ul>
   <li v-for="(item,index) in arr" :key="index">
     name:  {{item.name}}   ,    age: {{item.age}} <liEditer  :item="item" @setItem="setItem"></liEditer>
   </li>
 </ul>

</div>
</template>

<script>
  import liEditer from './Vue04-a'
    export default {
        name: "Vue04",
        components:{
            liEditer:liEditer
        },
        data(){
            return{
                arr:[
                    {id:1,name:'c',age:20},
                    {id:2,name:'e',age:21},
                    {id:3,name:'g',age:22}
                ]
            }
        },
        methods:{
            setItem(value){
                var item= this.arr.find(x=>x.id==value.id);
                item.name=value.name;
                item.age=value.age;
            }
        }
    }
</script>

<style scoped>
li{
  display: flex;
}
</style>

父向子传值：  父v-bind=>子props定义  接受即可，props定义的属性，不能在子组件进行修改，会引发报错，同时父组件对应的值也不会随之改变；

子向父传值：这有点像C# 里面的 窗体委托传值，使用方法把数据带回来。

父组件也可以用过ref获取子组件的值

使用ref对子组件进行标记，就可直接访问组件里面的数据

<template>
<div>
 <ul>
   <li v-for="(item,index) in arr" :key="index">
     name:  {{item.name}}   ,    age: {{item.age}}
<!--     <liEditer  :item="item" @setItem="setItem"></liEditer>-->
     <liEditer :ref="'li'+index" :item="item" @setItem="setItem"></liEditer>
   </li>
 </ul>

</div>
</template>

<script>
  import liEditer from './Vue04-a'
    export default {
        name: "Vue04",
        components:{
            liEditer:liEditer
        },
        data(){
            return{
                arr:[
                    {id:1,name:'c',age:20},
                    {id:2,name:'e',age:21},
                    {id:3,name:'g',age:22}
                ]
            }
        },
        methods:{
            setItem(value){
                // var item= this.arr.find(x=>x.id==value.id);
                // item.name=value.name;
                // item.age=value.age;
                console.log(this.$refs.li1)
            }
        }
    }
</script>

<style scoped>
li{
  display: flex;
}
</style>