1. 程式人生 > >父元件操作子元件的方式

父元件操作子元件的方式

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>