子传父
父组件
< template>
< div class = "hello" >
{ { str} }
< Home @hello= "onClick" / >
< / div>
< / template>
< script lang= "ts" >
import { Vue, Component} from 'vue-property-decorator'
import Home from './home.vue' ;
@Component ( {
components: {
Home
}
} )
export default class App extends Vue {
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
}
hello ( ) {
this . emitTodo ( )
}
}
< / script>
父传子
父组件
< template>
< div class = "hello" >
< Home : chuan= "chuan" / >
< / div>
< / template>
< script lang= "ts" >
import { Vue, Component} from 'vue-property-decorator'
import Home from './home.vue' ;
@Component ( {
components: {
Home
}
} )
export default class App extends Vue {
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>