vue父子组件之间传值以及方法调用

父组件向子组件传值

注：这种方式只能由父向子传递，子组件不能更新父组件内的data

先定义一个子组件，在组件中注册props

<template>
    <div>
        <div>{{message}}</div>
    </div>
</template>
<script>
    export default {
        props: {
            message: String //定义传值的类型<br>    
        },
        //或者props:["message"]
        data: {}
    }
</script>
<style>
</style>

在父组件中，引入子组件，并传入子组件内需要的值

<template>
    <div>
        <div>父组件</div>
        <child :message="parentMsg"></child>
    </div>
</template>
<script>
    import child from './child' //引入child组件
    export default {
        data() {
            return {
                parentMsg: '叶落森' //在data中定义需要传入的值
            }
        },
        components: {
            child
        }
    }
</script>

父组件调用子组件的方法

用$ref调用

父组件 this.$refs.yeluosen.childMethod()

<template>
  <div @click="parentMethod">
    <children ref="yeluosen"></children>
  </div>
</template>

<script>
  import children from 'children.vue'
  export default {
    data(){
      return {
      }
    },
    components: {      
      children
    },
    methods:{
      parentMethod() {     
        this.$refs.yeluosen.childMethod(); 
      }
    }
  }
</script>

子组件

<template>
  <div>
  </div>
</template>

<script>
  export default {
    data(){
      return {      
      }
    },
    methods:{
      childMethod() {
        alert('My name is 叶落森')
      }
    }
  }
</script>

子组件向父组件传值并调用方法

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

vue父子组件之间传值以及方法调用

猜你喜欢