组件传参

父组件向子组件传值——props方法

// 父组件App.vue
<template>
    <div>
        <p>我是父组件<p/>
        <app-son :dataList="appData"><app-son/>
    <div/>
<template/>
<script>
// 引入子组件appSon
import appSon from './components/appSon/index'

export default {
    name: 'app',
    components: {
        appSon
    },
    data(){
        appData:{
            title: '我是父组件的dataList的数据'
        }
    }
}
<script/>

// 子组件appSin
<template>
    <div>
        <p>我是子组件<p/>
        <p>{{dataList.title}}<p/>
    <div/>
<template/>
<script>
export default {
    name: 'appSon',
    props: {
        dataList: {
            trpe: [Object]
        }
    },
    mounted(){
        console.log(this.dataList.title)
    }
}
<script/>

解释

1. 在父组件
2. 通过import引入appSon子组件
3. 在components注册子组件，也就是激活
4. 在template里可以写子组件了，然后传参 <app-son :dataList="appData"><app-son/>
5. 在子组件
6. 要定义props，定义父组件能传的值有那些，这个是必须写的
7. js调用的的时候，可以在 mounted 里打印数据console.log(this.dataList.title)
8. 定义了dataList，在标签上用的时候通过 {{dataList.title}} 就可以调用了
9. 最后父组件传过的来值，就当在data里的数据一样使用

父组件调用子组件方法——$refs

通过$refs,父组件可以调用子组件方法和传参

<template>
    <div>
        // 写一个点击事件
        <p @click="changeColor">我是父组件<p/>
        // 在子组件上面加一个 ref="appSonRef"
        <app-son :dataList="appData" ref="appSonRef"><app-son/>
    <div/>
<template/>
<script>
// 引入子组件appSon
import appSon from './components/appSon/index'

export default {
    name: 'app',
    components: {
        appSon
    },
    data(){
        appData:{
            title: '我是父组件的dataList的数据'
        }
    },
    methods: {
        // 父组件调用子组件的方式  
        changeColor(){
            this.$refs.appSonRef.changeSinColor('改变颜色')
        }
    }
}
<script/>

<template>
    <div>
        <p>我是子组件<p/>
        <p>{{dataList.title}}<p/>
    <div/>
<template/>
<script>
export default {
    name: 'appSon',
    props: {
        dataList: {
            trpe: [Object]
        }
    },
    mounted(){
        console.log(this.dataList.title)
    },
    methods: {
        // 子组件被父组件调用的方法 
        changeSinColor(data){
            console.log(data)
        }
    }
}
<script/>

子组件调用父组件方法并且传参——$emit

<template>
    <div>
        <p @click="changeColor">我是父组件<p/>
        // @notice="receiveSon" 在调用子组件的地方，绑定一个方法notice是给子组件调用用的，receiveSon方法是父组件的方法
        <app-son :dataList="appData" ref="appSonRef" @notice="receiveSon"><app-son/>
    <div/>
<template/>
<script>
// 引入子组件appSon
import appSon from './components/appSon/index'

export default {
    name: 'app',
    components: {
        appSon
    },
    data(){
        appData:{
            title: '我是父组件的dataList的数据'
        }
    },
    methods: {
        changeColor(){
            this.$refs.appSonRef.changeSinColor('改变颜色')
        },
        // 父组件的方法在这，监听子组件的调用
        receiveSon(data){   
            console.log(data)
        }
    }
}
<script/>

<template>
    <div>
        <p>我是子组件<p/>
        <p>{{dataList.title}}<p/>
         // 调用子组件的方法
        <button @click="noticeFather">
            点我通知父组件
        <button/>
    <div/>
<template/>
<script>
export default {
    name: 'appSon',
    props: {
        dataList: {
            trpe: [Object]
        }
    },
    mounted(){
        console.log(this.dataList.title)
    },
    methods: {
        changeSinColor(data){
            console.log(data)
        },
        noticeFather(){
            // 通过$emit通知父组件，notice是突发的事件，后面的是参数
            this.$emit("notice",{name:'通知父组件的参数1',data:'通知父组件的参数2'})
        }
    }
}
<script/>

兄弟组件通信，或者父子层次比较深的——eventBus

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。