13. VUE 组件之间数据传递

组件数据传递：

1. 父组件向内传递属性---动态属性
2. 子组件向外发布事件
3. solt 插槽传递模板---具名solt

1. 父组件向子组件传递数据

子组件在父组件的并作为标签引入，通过设置标签的属性传递数据，在子组件用props接受，，例如下面这样，父组件parent.vue引入子组件child.vue，将父组件的数据name通过设置标签child的name属性传递给子组件，子组件通过props传递接受，接受后，在子组件内this.name就是父组件的name数据。

父组件：

<template>
    <div>
        <child :name="name"></child>
    </div>
</template>

<script>
    import child from "./child"
    export default {
        name: "list",
        components: {child},
        data(){
            return {
                name:"hello",
            }
        }
    }
</script>

<style scoped>

</style>

子组件：

<template>
    <div>{{name}}</div>
</template>

<script>
    export default {
        name: "edit",
        props: {
            name :String
        }
    }
</script>

<style scoped>

</style>

2. 子组件向父组件传递数据

1.发布订阅 发布 emit 订阅 on{}

2.on订阅，emit发布，on和emit是在Vue的原型上的，每个实例都可以调用。

3.父亲绑定一个事件，儿子触发这个事件，并将参数传递过去

子组件：

<template>
<div style="margin-top: 300px;margin-left: 500px;">
<input type="text" v-model="book"/>
<button @click="add">添加</button>
<p v-for="(item, index) of books" :key="index">{{item}}</p>
</div>
</template>


<script>
export default {
    name:'child',
    props:{
        books:Array
    },
    data()  {
        return {
            book:""
        }
    },
    methods: {
        add(){
            this.$emit('update',this.book);
        }
    }
}
</script>



<style>



</style>

父组件：

<template>
<div>
<span>hello</span>
<child ref="child" :books="books" @update="addBook"></child>
</div>
</template>


<script>
import child from './child';
export default {
    components:{child},
    data: function () {
        return {
            books:[]
        }
     },
    methods: {
        addBook(data){
            this.books.push(data);
        }
 
    }
}
</script>



<style>



</style>