vue：子組件向父組件傳值和父組件向子組件傳值

子組件向父組件傳值

子組件觸發自定義事件的方式：子組件觸發一個自定義事件並傳值，父組件監聽事件執行方法並接受值，從而實現子組件調用父組件的方法並傳值

uni-app父組件

<template>
    <view class="news">
        <news @itemClick="goDetail（$event）"></news>
    </view>
</template>

<script>
    import news from '../../components/news-item/news-item.vue'
    export default {
        components: {news},    
        methods: {
            goDetail(id){
                console.log(id)
                uni.navigateTo({
                    url: '/pages/news-detail/news-detail?id=' + id }) }
        },
    }
</script>

在父組件中通過$event來接收子組件傳遞過來數據，$event是固定的用法。

uni-app子組件：

<template>
    <view>
        <view class="news_item" v-for="(item,index) in news" :key="item.id" @click="goToDetail(item.id)">
            <image :src="item.img_url"></image>
            <view class="content">
                <view class="tit">
                    {{item.title}}
                </view>
                <view class="info">
                    <text>發表時間:{{item.add_time | formatDate}}</text>
                    <text>瀏覽:{{item.click}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        methods: {
            goToDetail(id){ this.$emit('itemClick',id) }
        }
    }
</script>

點擊的時候會觸發$emit方法，這個方法名是固定的，並且需要攜帶一個參數，參數的名稱就是所謂的自定義事件，參數的名稱是自定義的。這個事件會傳遞給父組件，父組件需要監聽這個事件，當子組件觸發自定義事件時，會執行父組件中相應的動作。

父組件向子組件傳值：

1、父組件通過屬性綁定的方式將值傳遞到子組件，子組件通過props方式接收

定義子組件時，新增props屬性，用於接收父組件傳過來的數據，它的值是一個數組，數組中可以包含很多的屬性，這些屬性都是從父組件傳遞過來的，傳遞過來之后就可以在模板中使用這個屬性了。

props屬性名規則：

如果在props中傳遞的名稱采用了駝峰的形式，那么在模板中傳遞屬性的時候，必須轉化為短橫線的形式，原因是DOM元素的屬性無法區分大小寫，如果我們傳遞的是駝峰形式就會有問題。但是字符串形式的模板沒有這個限制。

 props屬性值類型：字符串String，數值Number，布爾值Boolean,數組Array，對象Object

對於數值和布爾類型的數據來說，如果用v-bind進行綁定的話，在子組件中就可以得到對應類型的數據，如果不用v-bind綁定，則得到的都是字符串。

uni-app父組件：

<template>
    <view class="news">
        <news :news='news'></news>
    </view>
</template>

<script>
    import news from '../../components/news-item/news-item.vue'
    export default {
        components: {news},    
        data() {
            return {
                news: []
            }
        },
        methods: {
            async getNews(){
                const res = await this.$myRequest({url: '/api/getnewslist'})
                console.log(res)
                this.news = res.data.message
                
            }
          
        },
        onLoad() {
            this.getNews()
        }
    }
</script>

uni-app子組件：

<template>
    <view>
        <view class="news_item" v-for="(item,index) in news" :key="item.id" @click="goToDetail(item.id)">
            <image :src="item.img_url"></image>
            <view class="content">
                <view class="tit">
                    {{item.title}}
                </view>
                <view class="info">
                    <text>發表時間:{{item.add_time | formatDate}}</text>
                    <text>瀏覽:{{item.click}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['news']
    }
</script>

2、使用ref和$refs來實現給子組件傳值

組件中使用ref和$refs來實現給子組件傳值或者調用子組件的方法。在Vue中一般很少會用到直接操作DOM，但不可避免有時候需要用到，這時我們可以通過ref和$refs這兩個來實現.

ref 被用來給子組件注冊引用信息， 引用信息將會注冊在父組件的 $refs 對象上，如果是在子組件上使用，引用就指向(子)組件的實例。

$refs 是一個對象，持有已注冊過 ref 的所有的子組件。

子組件代碼如下：

<template>
    <div>
        <el-dialog :title="textMap[dialogStatus]+'工藝節點信息'" :visible.sync="dialogFormVisible" width="35%"
            @close="clearForm">
            <div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
                    <el-form-item label="節點名稱" prop="mesNodeNo">
                        <el-select v-model="ruleForm.mesNodeNo" placeholder="請選擇" style="width:100%" @change="getValue"> <el-option v-for="item in dataSetItemList" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"> </el-option> </el-select> </el-form-item> <el-form-item label="投入產出表關聯方式" prop="relaInfo"> <el-select v-model="ruleForm.relaInfo" placeholder="請選擇" style="width:100%"> <el-option v-for="item in dataSetItemList2" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"> </el-option> </el-select> </el-form-item> <el-form-item label="與上下級節點關聯方式" prop="relaNext"> <el-select v-model="ruleForm.relaNext" placeholder="請選擇" style="width:100%"> <el-option v-for="item in dataSetItemList2" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"> </el-option> </el-select> </el-form-item> </el-form> </div> </el-dialog> </div> </template> <script> export default { name: 'MesDialog', data() { return { //節點字典列表  dataSetItemList: [], //投入產出字典列表  dataSetItemList2: [] </script>

父組件代碼如下：

<template>
    <div class="app-container">
        <node-config-dialog ref="nodeConfigDialog" @saveInfo="saveInfo"></node-config-dialog>
    </div>
</template>

<script>
    import NodeConfigDialog from './NodeConfigDialog'
    export default { name: 'NodeConfig', components: { NodeConfigDialog }, data() { return {//數據集合代碼，節點  } }, methods: { //查詢字典數據 getDataSetItems() { dataSet.getDataSetItemByDataSet({ dataCode: this.dataSetCode }).then(res => { if (res.data.length != 1) { this.$message.error("查詢數據集合列表失敗") return } this.$refs.nodeConfigDialog.dataSetItemList = res.data[0].itemList }).catch(err => { console.log(err) }) }, getDataSetItems2() { dataSet.getDataSetItemByDataSet({ dataCode: this.dataSetCode2 }).then(res => { if (res.data.length != 1) { this.$message.error("查詢數據集合列表失敗") return }  this.$refs.nodeConfigDialog.dataSetItemList2 = res.data[0].itemList }).catch(err => { console.log(err) }) }, } } </script>

父組件通過$refs給子組件的屬性賦值。也可以通過調用方法的方式傳值：

父組件：

showNode() {
        this.$nextTick(() => {
          this.$refs[this.activeName][0].init(this.activeName, this.nodeData[this.activeName]);
        });
      },

子組件：

<script>
    export default {
      name: "nodeInfoOne",
      data() {
        return {
          caption: '',
          nodeList: []
        }
      },
      methods: {
        init(caption, data) {
          this.caption = caption;
          this.nodeList = data;
        }
      }
    }
</script>