vue 子组件和父组件之间的传值

阅读数:4 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、父组件向子组件传值

1、创建子组件,在src/components/文件夹下创建一个Child.vue

2、Child.vue中创建props,然后创建一个名为message的属性。

<template>
  <div>
      <h2>child子组件部分</h2>
      <p>{{message}}</p>
  </div>
</template>
<script>
export default {
  props: ["message"]
}
</script>
<style>
</style>

3、在Parent.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值。

<template>
   <div>
      <child message="hello"></child>
   </div>
</template>
<script>
import child from './component/Child'
export default {
  name: 'app',
  components: {
    child,
  }
}
</script>
<style>
</style>

二、子组件向父组件传值

1、在子组件中使用$emit来触发一个自定义事件,并传递一个参数

<template>
  <div>
      <h2>Child子组件部分</h2>
      <p>{{message}}</p>
      <button v-on:click=sendMsgToParent>向父组件传值</button>
  </div>
</template>
<script>
export default {
  props: ["message"],
  methods: {
    sendMsgToParent: function(){
         this.$emit("listenToChildEvent","this message is from child");
    }
  }
}
</script>

2、在父组件中监听该自定义事件并添加一个响应该事件的处理方法

<template>
  <div>
    <child v-bind:message="parentMsg" v-n:listenToChildEvent="showMsgFromChild">
      
    </child>
  </div>
</template>
<script>
import child from './components/Child';
export default {
  name: 'parent',
  data() {
     return {
      parentMsg: 'hello,child',
    }
  },
  methods: {
     showMsgFromChild: function(data) {
      console.log(data);
    }
  }
}
</script>