Vue 組件之間傳值(ref屬性傳值，父子組件傳值，vuex傳值)

父子組件傳值

在父組件中改變子組件里的數據

ref屬性應用和傳值

父組件

<template>
  <div class="ctn">
    <input type="text" value="ref的用處" ref="input1" />
    <button @click="add()">改變數據</button>

    <!-- 2，添加ref屬性放在組件上，可以獲取子組件的所有方法 和數據-->
    <Ref1 ref="childComp"></Ref1>
  </div>
</template>
<script>
import Ref1 from "./ref1";
export default {
  components: {
    Ref1,
  },
  data() {
    return {
      fuVal: "父組件的值1",
    };
  },
  mounted: function() {
    console.log("獲取子組件的數據", this.$refs.childComp.childval0);
    console.log("獲取子組件的方法", this.$refs.childComp.getList);
    // 向子組件傳值
    this.$refs.childComp.getList(this.fuVal);
  },
  methods: {
    add() {
      // 1，通過ref獲取dom元素，改變dom
      this.$refs.input1.value = 22;
      this.$refs.input1.style.color = "blue";

        // 更新子組件的值，或調用子組件的方法
    //   this.$refs.childComp.childval0 = '新69';
    },
  },
};
// ref 需要在dom已經渲染完成后才會有，在使用的時候確保dom已經渲染完成。
// 比如在生命周期 mounted(){} 鈎子中調用，或者在 this.$nextTick(()=>{}) 中調用。
</script>

子組件

<template>
  <div>
    <div class="box" ref="boxRef">{{ name }}</div>
    <p>改變子組件的值：{{childval0}}</p>
    <div>父組件傳的值：{{ fuVal }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      childval0: "68",
      name: "小小妹",
      fuVal: "",
    };
  },
  methods: {
    newName() {
      // 修改數據之后使用這個方法，獲取更新后的 DOM
      this.$nextTick(() => {
        console.log(this.$refs.boxRef.textContent);
      });
    },
    // 父組件傳的值
    getList(val) {
      this.fuVal = val;
    },
  },
};
</script>

 ref的基本應用：https://blog.csdn.net/wh710107079/article/details/88243638

 

 

一、父組件向子組件傳遞數據

在 Vue 中，可以使用 props 向子組件傳遞數據。

 父組件部分：使用 v-bind 將值綁定上

<template>
    <div class="ctn">
        <div>
            <div>
                父傳子： <input type="text" v-model="inputval">
            </div>
            <Zizujian :inputName="inputval" ></Zizujian>
        </div>
    </div>
</template>
<script>
import Zizujian from '@/components/zizujian.vue'

export default {
    components:{
        Zizujian
    },
    data(){
        return{
            inputval:'',
        }
    },
    methods:{
 
    }
}
</script>

 子組件部分：

<template>
    <div class="chir">
        <div>
            子組件接收： <p>{{inputName}}</p>
        </div>
    </div>
</template>
<script>

export default {
    components:{
    },
    // 接受父組件的值
    props: ['inputName'],
    // props:{
    //     inputName: String
    // },
    data(){
    },

}
</script>

從父組件接收值，就需要使用 props: ['inputName']

在 props 中添加了元素之后，就不需要在 data 中再添加變量了。

總結：在一個頁面里，我們從服務器請求了很多數據，其中一些數據並不是頁面的大組件來展示，而是讓子組件來展示的。

所以需要父組件將數據傳遞給子組件（大組件請求數據，子組件用來展示）。

 

二、子組件向父組件傳遞數據

子組件主要通過事件 向父組件傳遞數據

1，子組件通過$emit()來觸發事件

2，在父組件里，通過v-on自定義事件來監聽

子組件部分：

<template>
    <div class="childr">
        <div>
            <span>子組件傳值</span>
            <!-- 子傳父的方法 -->
            <button @click="childClick()">點擊事件</button>
        </div>
    </div>
</template>
<script>

export default {
    components:{
    },
    data(){
        return{
            childVal:'我是子組件的值001'
        }
    },
    methods:{
        childClick(){
            this.$emit('childValClick', this.childVal)
        }
    }
}
</script>

首先聲明一個事件方法 ，在事件里使用 $emit 來定義一個  要傳遞的方法，並帶上值。

父組件部分：

<template>
    <div class="ctn">
        <div>
            <span>子傳父的值：{{childVal2}}</span>
             <ZiZuJian v-on:childValClick="childValClick"></ZiZuJian>

　　　　　　　　　　<!-- 或者 @childValClick="childValClick" -->

        </div>
    </div>
</template>
<script>
import ZiZuJian from '@/components/zizujian.vue'

export default {
    components:{
        ZiZuJian
    },
    data(){
        return{
            childVal2:''
        }
    },
    methods:{
        // 子組件傳值
        childValClick(val){
            this.childVal2 = val;
        }
    }
}
</script>

 在父組件中，聲明一個方法childValClick，獲取子組件傳遞的參數

https://www.cnblogs.com/wisewrong/p/6834270.html

總結：我們整個操作的過程還是在子組件中完成，但是之后的展示交給父組件，

　　　這樣，就需要把子組件的值傳遞給父組件 。

 

三、兄弟組件傳遞數據

1，使用vuex來傳值

2，定義一個“中轉站”（新的vue實例）來傳值

https://www.jb51.net/article/115151.htm

https://zhuanlan.zhihu.com/p/80913683