vue父子组件之间传值

一.父组件向子组件传值

　　父组件向子组件传值主要通过  props  自定义属性进行通信

　　(1)子组件

　　<template>

　　　　<div>父组件传递的值： {{ send }}</div>

　　</template>

　　<script lang="ts">

　　　　import { Vue, Prop } from 'vue-property-decorator';

　　　　export default class extends Vue {

　　　　　　name: 'Test';

　　　　　　@Prop() send?: '';

　　　　}

　　</script>

　　(2)父组件

　　<template>

　　　　<Test send="我是父组件传过来的值"></Test>

　　</template>

　　<script lang="ts">

　　　　import Test from './test';

　　　　import { Vue } from 'vue-property-decorator';

　　　　export default class extends Vue {

　　　　　　

　　　　}

　　</script>　　

 

二.子组件向父组件传值

　　子组件向父组件传值主要通过  this.$emit  自定义事件进行通信（注意：this.$on() 必须在 this.$emit(）之前触发 )

　　(1)子组件

　　<template>

　　　　<button @click="emit('send', '给父组件的值')">传递给父组件</button>

　　</template>

　　<script lang="ts">

　　　　import { Vue } from 'vue-property-decorator';

　　　　export default class extends Vue {

　　　　　　name: 'Test';

　　　　}

　　</script>

　　(2)父组件

　　<template>

　　　　<Test @send="getdata"></Test>

　　</template>

　　<script lang="ts">

　　　　import Test from './test';

　　　　import { Vue } from 'vue-property-decorator';

　　　　export default class extends Vue {

　　　　　　getdata(val) {

　　　　　　　　console.log(val);

　　　　　　}

　　　　}

　　</script>