vue组件间通信

父组件页面

<template>
    <div>
        <p>我是父组件</p>

        图书名：<input type="text" v-model="name">
        价格：<input type="text" v-model="price">
        所属分类：
        <select v-model="classify">
                <option :value="i.id" v-for="i in classifylist" :key="i.id">{{i.cname}}</option>
        </select>
            <button @click="addbook" v-show="flag==1">添加</button>
            <button @click="aUpdate" v-show="flag==2">修改</button>
        <hr>
		
		<!-- 展示子组件的内容 -->
        <!-- :后的时子组件里面接收的名字，=后面的是父组件的名字 -->
        <!-- @后面的是子组件里定义的名字，=是父组件里获取参数的名字 -->
        <booklist @upbook="Update"></booklist>
    </div>
</template>
import {put_book,add_book,get_book} from '../api/api'

<script>

//导入axios函数  
import {put_book,add_book,get_book} from '../api/api'
export default {

 components:{
        booklist
    },
    data() {
        return {
            name:"",
            price:"",
            classifylist:[],
            classify:1,
            flag:1,
            id:1
        }
    },
	methods: {
	        aUpdate(){
	         	//直接使用导入的axios函数
	            this.flag=2
	            var data={'name':this.name,'price':this.price,'classify':this.classify,'id':this.id}
	            put_book(data).then(resp=>{
	                 alert('修改成功！')
	                this.$router.go(0)
	            })
	        },
	        Update(val){
	            this.flag=2
	            console.log(val)
	            this.id=val[0].id
	            this.name=val[0].name
	            this.price=val[0].price
	            this.classify=val[0].classify
	        },
	        addbook(){
	            var data={'name':this.name,'price':this.price,'classify':this.classify}
	             //直接使用导入的axios函数
	            add_book(data).then(resp=>{
	                console.log(resp.data)
	                alert("添加成功")
	            })
	        },  
	        getbook(){
	         //直接使用导入的axios函数
	            get_book().then(resp=>{
	                this.classifylist=resp
	                //注意axios封装已经把数据封装好直接赋值resp就可以，不需要.data
	                console.log(resp)
	            })
	        }
	    }
	}
}
</script>

子组件页面

<template>
    <div>
        <p>我是子组件</p>

        <table>
            <tr>
                <td>图书名</td>
                <td>价格</td>
                <td>所属分类</td>
            </tr>
            <tr v-for="i in bookList" :key="i.id">
                <td>{{i.name}}</td>
                <td>{{i.price}}</td>
                <td>{{i.classify.cname}}</td>
                <td><button @click="UpdateBook(i.id,i.name,i.price,i.classify.id)">修改</button></td>
            </tr>
        </table>
    </div>
</template>

<script>
import axios from 'axios'
import {getBook1} from '../api/api'

export default {
    data() {
        return {
            bookList:[]
        }
    },
    methods: {
        UpdateBook(id,name,price,classify){
            let upbook=new Array()
            upbook.push({'id':id,'name':name,'price':price,'classify':classify})
            console.log(upbook)
            
            this.$emit('upbook',upbook)
        },
        getbook(){
            getBook1().then(resp=>{
                console.log(resp)
                this.bookList=resp
            })

            // axios({
            //     url:"http://127.0.0.1:8000/booklist/"
            // }).then(resp=>{
            //     console.log(resp.data)
            //     this.bookList=resp.data
            // })
        }
    },
    created() {
        this.getbook()
    }
}
</script>

<style scoped>
table,tr,td{
    margin: 0 auto;
    border: 1px dashed blue;
}
</style>

先看效果图

总结以下几点：
父子组件的调用：

• Import 导入子组件
• compants注册子组件
• 注册的子组件当做标签来使用

父组件给子组件传参：

• 父组件里的子标签里写上要传递的数据 （：子组件的参数名字=父组件的参数名字）
• 在子组件里注册参数（props）
• 使用父组件传过来的参数

子组件给父组件传参：

• 子组件里先用特定的方法来把数据传递给父组件（ this.$emit(“方法的名字”，要传递的数据) ）
• 父组件的子标签里来接收数据（@子组件的方法 = 父组件的方法）
• 在methods里接收传过来的val并赋值。