Multilevel component communication

  • grand -> father-> son

01. $props

  • Use v-bind=”$props”, ok

    • Put the current component’spropsTo its children under all properties in
    • The child component needs to be in thepropsReceive these attributes in the
    / / grand components<father :title="title" :name="name"></father>// The father component receives arguments through props<script>
    export default {
        // The parameters received through the props attribute are stored in $props
        props: {
            title: {
                type: String}},mounted(){
            console.log(this.$props) // title}}</script>// You can pass all properties of props to the son component with $props<son v-bind="$props"></son>// son component: receives these parameters via props<script>
    export default {
        props: {... }}</script>
Copy the code

02. $attrs

  • The use of v – bind = “$attrs”

    • Can receive from the parent component in the child componentpropsThe receivedparameter

      • We also need to add inheritAttrs: false to the child to avoid inheriting attributes passed by the parent.

        • That is: no use in child componentspropsThe received parameters are accepted by the root element of the quilt component and displayed as attributes of the root element
        • And set thisinheritAttrsProperties forfalseYou can remove this default behavior

      • However, you can display these parameters again with $attrs

        • class 和 styleWith the exception of
    / / grand components<father :title="title" :name="name"></father>/ / father components<script>
    export default {
        inheritAttrs: false.// You can avoid the root element inheriting attributes
        // If this property is not set, the root element of the father component will be rendered as
        // 
         
    
          ... 
         
     -- See F12 for details    
        
        // An argument not received by props can be obtained with this.$attrs
        mounted(){
            console.log(this.$attrs) / / title, the name}}    </script>// All of these attributes can be passed to the son component with $attrs<son v-bind="$attrs"></son>// son component: these parameters can be received via props (or $attrs again)<script>
    export default {
        props: {... }}</script>
Copy the code

03. $listeners

  • $listeners

    • Used to receive messages from the parent componentv-onThe event
    • But by.nativeBound native events are useless
    / / grand components<father @func1="handleFunc1" @func2="handleFunc2"></father>/ / father components<script>
export default {
    mounted(){
        $Listeners can receive all non-native event functions from the parent component
        console.log(this.$listeners) / / func1, func2
        this.$listeners.func1() // Use method 1}}</script>// Events of its parent can be transmitted to son via V-on ="$listeners"<son v-on="$listeners" @fun3="handleFunc3"></son>/ / son components<script>
export default {
    mounted() {
        // Get all events from the parent component, including grand and father events
        console.log(this.$listeners) Func1, func2, func3
        this.$emit('func2') // Use method 2}}</script>
Copy the code

I front-end side dish chicken, if there is wrong, please forgive