vue插槽02-作用域插槽 $parent,$children,遞回組件

提示：以下是本篇文章正文內容，下面案例可供參考

4.作用域插槽

官網：有時讓插槽內容能夠訪問子組件中才有的資料是很有用的，

整體架構參考上篇vue插槽01
有的時候會想換掉備用內容，如Wrap組件模板內容如下 ：

App.vue
	<Wrap> 
	//這里為空時填充備用內容
	// {{value}} 這里是獲取不到Wrap組件中的value
    </Wrap>
Wrap.vue
	<h1>wrap</h1>
    <slot> 
     這是slot標簽內容備用內容{{value}}
    </slot>
    <p>這是wrap的P標簽</p>
    <hr />

為了讓 value 在父級的插槽內容中可用，我們可以將 value 作為 元素的一個 attribute系結上去：

注意:v-slot只能添加在template上，只有在里面接收值的可以這樣直接寫

App.vue
	<h1>wrap</h1>
	//注意v-slot只能添加在template上，只有在里面接收值的可以這樣直接寫
	<Wrap v-slot:default="wrapValue">  
      {{wrapValue}}
      <Box :title="wrapValue.data"/> //Box組件也可以獲取到這個值
    </Wrap>
Wrap.vue 	
	    <h1>wrap</h1>
	    <slot :data="value"> //進行系結
	     這是slot標簽內容備用內容{{value}}
	    </slot>
	    <hr />
    <script>
		export default {
		  data() {
		    return {
		      value: "wrap-value",
		    }
		  },
		};
	</script>
Box.vue	  
	   <h2>Box</h2> {{title}}
	<script>
	export default {
	  props: {
	    title: String,
	  }
	};
	</script>

解構插槽：

	<Wrap v-slot:default="{data}"> 
      {{data}}
      <Box :title="data"/>
    </Wrap>

1. 不帶引數的 v-slot 被假定對應默認插槽：
2. 注意默認插槽的縮寫語法不能和具名插槽混用，因為它會導致作用域不明確
3. 只要出現多個插槽，請始終為所有的插槽使用完整的基于 template 的語法
   舉例：

//Wrap.vue
	<template>
	  <div class="wrap">
	    <h1>wrap</h1>
	    <slot :data="value"> 
	     這是slot標簽內容備用內容{{value}}
	    </slot>
	    <slot name="list" :data="list" />
	    <hr />
	  </div>
	</template>
	<script>
	export default {
	  data() {
	    return {
	      value: "wrap-value",
	      list:[1,2,3,4]
	    };
	  },
	};
</script>

//App.vue
	<template>
	  <div id="app">
	    app
	    <Wrap>
	      <template v-slot:defalut="{ data }">
	        <Box :title="data" />
	      </template>
	      <template v-slot:list="{ data }">
	        <ul>
	          <li v-for="(item, index) in data" :key="index">
	            {{ item }}
	          </li>
	        </ul>
	      </template>
	    </Wrap>
	  </div>
	</template>
	<script>
	import Wrap from "./components/Wrap";
	import Box from "./components/Box";
	export default {
	  components: {
	    Wrap,
	    Box,
	  }
	};
	</script>

運行：

5.$parent, $children

1. $parent獲取父組件實體（可在子組件直接使用this.$parent即可）
2. $children獲取子組件實體（可在父組件直接使用this.$children即可）
3. 還可以獲取組件內的資料，修改資料

//App.vue
<template>
  <div id="app">
    app
    <Wrap ref="wrap">
      <Box />
      <h1>test</h1>
      <Foo />
    </Wrap>
  </div>
</template>
<script>
import Wrap from "./components/Wrap";
import Box from "./components/Box";
import Foo from './components/Foo'
export default {
  components: {
    Wrap,
    Box,
    Foo
  }
};
</script>

Wrap.vue

<template>
  <div class="wrap" :style="{ background: bgColor }">
    <h1>wrap value: {{ value }}</h1>
    <slot />
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "hello",
      bgColor: "green",
    };
  },
  methods: {
    setBgColor() {
      this.bgColor = "#ddd";
    },
  },
  mounted() {
    console.log(this.$children);
  },
};
</script>

<style>
.wrap {
  padding: 40px;
  background: red;
}
</style>

Box.vue

<template>
  <div class="box">
    <h2>box</h2>
    <button @click="modifyAction">按鈕</button>
  </div>
</template>
<script>
export default {
  mounted(){
    console.log(this.$parent);
  },
  methods: {
    modifyAction(){
      console.log(this.$parent.value) //獲取父組件的資料
      console.log(this.$parent.bgColor)
      this.$parent.value = 'hi!'
      console.log(this.$parent.value)
      this.$parent.setBgColor();
      console.log(this.$parent.bgColor);

    }
  }
}
</script>
<style>
.box{
  background: yellow;
}
</style>

代碼如下（示例）：

點擊

6.遞回組件

App.vue

<template>
  <div id="app">
    app
    <demo :value="5" />
  </div>
</template>
<script>
import Demo from "./components/Demo";

export default {
  components: {
    [Demo.name]: Demo,
  },
};
</script>

Demo.vue
只有在這里設定了組件的名字后，才能在組件內部的template中呼叫組件自身

<template>
  <div class="demo" :style="{background:`rgb(${r},${g},${b})`}">
      <button v-if="value>1" @click="showAction">按鈕</button>
      <demo v-if="isShow && value>1"  :value="value-1" />
  </div>
</template>

<script>
export default {
    //只有在這里設定了組件的名字后，才能在組件內部的template中呼叫組件自身    
    name:'demo',
    props:{
        value:Number,
    },
    data(){
        return{
            r:Math.random()*255,
            g:Math.random()*255,
            b:Math.random()*255,
            isShow:false,
        }
    },
    methods:{
        showAction(){
            this.isShow=!this.isShow;
        }
    }
}
</script>

<style>
.demo{
  padding: 20px;
  border: 1px solid #ddd;
}
</style>

運行效果圖：