父组件传值给子组件

子组件

<template>

  <div>

    <div>{{innertext}}</div>   

  </div>

</template>

<script>

    export default{

        name:'hello',

        // props:String 只定义类型

        props:{

            innertext:{            
                 type:String,

                 default:'456'      // 可以定义默认值
              }
        }

    }

</script>

子组件通过 props 接收值

父组件

<template>

  <div id="app">

    <hello :innertext="content"></hello>

  </div>

</template>

<script>

    import hello from "@/components/hello";

    export default{

        components:{

            hello

        },

        data(){

            return{

                content:'123'

            }

        }

    }

</script>

父组件通过标签属性传值

子组件传值给父组件

子组件

<template>

  <div>

    <div @click="componentEmit">{{innertext}}</div>   

  </div>

</template>

<script>

    export default{

        name:'hello',

        methods:{

            componentEmit(){

                this.$emit('componentClick',date)

            }

    }

    }

</script>

子组件通过 $emit 自定义事件传值

父组件

<template>

  <div id="app">

    <hello @componentClick="eleClick"></hello>

  </div>

</template>

<script>

    import hello from "@/components/hello";

    export default{

        components:{

            hello

        },

        data(){

            return{

            }

        },

        methods:{

            eleClick(e){

                /**

                e 是 子组件点击触发后传过来的值

                */

            }

        }

    }

</script>

父组件通过接受自定义事件接收值

sync 修饰符

子组件

<template>

  <div>

    <div @click="updateEvent">{{innertext}}</div>   

  </div>

</template>

<script>

    export default{

        name:'hello',

        props:{

          innertext:String 

        },

        methods:{

            updateEvent(){

                this.$emit("update:innertext",'789')

            }

    }

    }

</script>

父组件

<template>

  <div id="app">

    <hello :innertext.sync="content"></hello>

  </div>

</template>

<script>

    import hello from "@/components/hello";

    export default{

        components:{

            hello

        },

        data(){

            return{

                content:'123'

            }

        },

        methods:{



        }

    }

</script>

点击促发后content数据会变成子组件传的值

将原生事件绑定到子组件

<template>

<div>

        <hello @click.native="eventClick"></hello>

    </div>

</template>

<script>

    export default{

        methods:{

            eventClick(){

                /**

                  do something

                */

            }

        }

    }

</script>

在子组件使用原生事件在事件名后面加 .native