父元件操作子元件的方式
阿新 • • 發佈:2018-11-11
1、子元件
<template>
<div class="">
{{form}}
</div>
</template>
<script>
export default {
props:['form'],
data () {
return {
msg: 'layout'
}
}
}
</script>
<style>
</style>
2、父元件
<template> <div class=""> <Child v-bind:form="msg"></Child> </div> </template> <script> import Child from '@/components/InfoTranstion/index'; export default { data () { return { msg: '我是父元件parent1呼叫的子元件Child' } }, components: { Child } } </script> <style> </style>
3、通訊的實現步驟
(1)子元件的 props:繫結的值為屬性: props:['form'],即form為父元件操作子元件的入口通道。
(2)在父元件中實現動態繫結只需要將form的值繫結到data中一個變數msg,通過這個變數的改變來展示不同的資料效果。
<Child v-bind:form="msg"></Child>