子传父

父组件

<template> <div class="hello"> {{str}} <Home @hello="onClick"/> </div> </template> <script lang="ts"> import {Vue,Component} from 'vue-property-decorator' //引入子组件，在中Component创建 import Home from './home.vue'; @Component({ components: { Home } }) //在script方面还是比起js有一定的差距的，这里需要大家好好琢磨一下 export default class App extends Vue { // 初始化数据 data可以声明成类属性形式 str:String="" // 接收子组件传递过来的值 onClick(res:String){ this.str=res; } } </script>

子组件

<template> <div @click="hello"> 点击我给父组件传递值 </div> </template> <script lang="ts"> import {Vue,Component,Emit} from 'vue-property-decorator' @Component({}) export default class Home extends Vue{ msg= '子传父' // 装饰器中的参数是方法名 @Emit("hello") emitTodo():number{ return 12 } // 和原本的vue一样,子传父使用方法来传递,引用一个@emit hello(){ this.emitTodo() } } </script>

父传子

父组件

<template> <div class="hello"> <Home :chuan="chuan"/> </div> </template> <script lang="ts"> import {Vue,Component} from 'vue-property-decorator' //引入子组件，在中Component创建 import Home from './home.vue'; @Component({ components: { Home } }) export default class App extends Vue { // 初始化数据 data可以声明成类属性形式 chuan:String="父传子的值" } </script>

子组件

<template> <div> {{chuan}} </div> </template> <script lang="ts"> import {Vue,Component,Prop} from 'vue-property-decorator' @Component({}) export default class Home extends Vue{ @Prop(String) chuan!: String; } </script>