vue中父子組件傳遞信息實現

為了能夠在父子組件中實現雙向控制，需要以下的步驟：

第一步：子組件中挖坑

（1）在需要父組件填充具體內容的地方挖坑，方式為

  <slot name="message"></slot>

通過slot和name指定坑

第二步：父組件中填坑（具體內容）

（1）引入子組件作為其中一個模塊

在父組件的script中通過import引入，然后通過components進行掛載，最后以標簽的形式使用

（2）在子組件模塊區域內，使用slot="name的值"指定需要填的坑

<p slot="message">//填坑的內容
              
  <span>加入購物車成功</span>

 </p>

上述兩步只是實現了組件簡單內容的填充，但涉及到值的傳遞，及控制時還需如下的操作

（1）父組件中的值傳遞到子組件中：

子組件使用props拿到傳遞過來的值（在子組件的export default中）

此時父組件與值組件的代碼為：

父組件：

<Modal v-bind:mdShow="mdShow" >//Modal是子組件在父組件中
            <p slot="message">
                請先登錄，否則無法加入購物車！
            </p>
   </Modal>

<script>
import Modal from  '@/components/Modal.vue'
 export default {
  data () {
   return {
       mdShow: false,
          }
        },
  components: {
            Modal
        },
}
</script>

子組件中代碼為：

 <div  v-bind:class="{'md-show':mdShow}">
      
      <div class="confirm-tips">

          <slot name="message"></slot>

       </div>
                   
    </div>

 

<script>
    export default{
        props: ["mdShow"],//接受到來自父組件的值
        data(){
            return {
             
            }
        },
     }
    }
</script>

（2）子組件控制父組件中的值：實質上通過子組件的方法間接 通過$emit方法去調用父組件中的方法，

例如父組件有一個方法為close

<p  v-on:close="closeModal">
<Modal v-bind:mdShow="mdShow" >//Modal是子組件在父組件中
            <p slot="message">
                請先登錄，否則無法加入購物車！
            </p>
   </Modal>
</p>
<script>
import Modal from  '@/components/Modal.vue'
 export default {
  data () {
   return {
       mdShow: false,
          }
        },
  components: {
            Modal
        },
methods:{
  closeModel(){
  this.mdShow = true;
}
}
</script>

(2)子組件中需要觸發父中綁定的close方法

 
<div  v-bind:class="{'md-show':mdShow}">
      
<div @clicki="closeModal">Close<div>
      <div class="confirm-tips">

          <slot name="message"></slot>

       </div>
                   
    </div>

<script>
    export default{
        props: ["mdShow"],
        data(){
            return {
             
            }
        },
        methods: {
            closeModal(){
                this.$emit("close");//觸發父組件中定義的方法
            }
        }
    }
</script>

初學階段簡單總結一下：子組件中挖坑，父組件填坑。

前面兩步驟只是簡單實現組件的加載，對於有值傳遞和控制，需要通過該后面兩步的props接受來自父組件的值 和$emit觸發父組件的方法實現。