Vue练习父子组件的调用

定义一个子组件

<template>
   <h2>子组件</h2> 
</template>

<script>
    export default {
        name: "son"
    }
</script>

<style scoped>

</style>

定义一个父组件，并引入子组件

<template>
  <div>
  <h1>父组件</h1>
  <son :name="name"></son>
  </div>
</template>

<script>
  import son from ‘./son.vue‘
    export default {
        name: "father",
        comments:{son},
        data(){
            return {
                name:"ichigo"
            }
        }
    }
</script>

<style scoped>

</style>

注意每个组件只允许有一个根

props的使用

向子组件注册属性值，可以动态传递

<template>
  <h2>子组件名称{{this.name}}</h2>
</template>

<script>
    export default {
        name: "son",
        props:{name:String}//或者props:[‘name‘]
    }
</script>

<style scoped>

</style>

ref的使用

给子组件注册引用，便于调用子组件的属性和方法

<son :name="name" ref="child"></son>

mounted: function () {
    console.log(this.$refs.child.name);
}

$emit的使用

上面两种示例主要都是父组件向子组件通信，而通过$emit 实现子组件向父组件通信。

$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

如：

<template>
  <div>
  <h1>父组件</h1>
  <son :name="name" ref="child" @getMessage="showMsg"></son>
  </div>
</template>

<script>
  import son from ‘./son.vue‘
    export default {
        name: "father",
        comments:{son},
        data(){
            return {
                name:"ichigo"
            }
        },
        mounted: function () {
            console.log(this.$refs.child.name);
        },
        methods:{
            showMsg(name){
                this.name=name;
            }
        }
    }
</script>

<template>
  <h2>子组件名称{{this.name}}</h2>
</template>

<script>
    export default {
        name: "son",
        props:{name:String},
        mounted: function () {
            this.$emit(‘getMessage‘, ‘我是父组件！‘)
        }
    }
</script>

<style scoped>

</style>

Vue练习父子组件的调用

原文：https://www.cnblogs.com/ichigo1120/p/15054045.html