技術標籤：vue

一、父頁面

1. 引用

//引用一
import menuTitle from '@/components/menuTitle/main';

export default {
  name: 'parent',
  //引用二
  components:{
    menuTitle
  },
  data(){
  	return{
  		menuTitle:"夠忙高管理", //父元件要傳給子元件的值 
  	}
  },
  methods: {
    titleAdd(num){ 
      //父元件的值使用子元件傳過來的值
      console.error
 
('子元件傳給父元件的值 :>> ',num);
    },
  }
}

2. 頁面

<!-- 子元件中使用的props變數名要與v-bind繫結的相同名稱 -->
<!-- 使用v-bind可以達到動態傳值的效果，當menuTitle改變時，傳給子元件的值也會相應改變 -->
<menuTitle :title="menuTitle" @titleAdd="titleAdd"></menuTitle>

二、子頁面

<template >
    <div @click="
 
myclick" style="cursor:pointer;">
        <div style="line-height: 43px;display: flex;align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:5px;height:20px;margin-right:5px;"></span>
        <!-- 父元件傳給子元件的值，props裡變數的可以直接使用（用法和data中定義的變數一樣） -->
 

        <span>{{title}}</span>
        </div>
    </div>
</template>

<script>
export default {
    name:'menu-title',
    props: {
        title: { //要與父元件v-bind繫結的相同名稱
            type: String,    //props 型別
            require:true,    //必填型別  更多型別可見VUE文件
        },
    },
    data() {
        return {
            num:0,//要給父元件傳的值
        }
    },
    methods: {
        myclick(){
        	console.warn('子元件使用父元件穿過來的值 :>> ',this.title); //子元件在JS中使用父元件傳過來的變數
            this.num++;
            this.$emit('titleAdd', [this.num])    //給父元件傳值
        }
    },
}
</script>
<style scoped>
</style>

結果圖