命名槽在覆盖组件的各个部分时非常有用,如下所示:
<warning> <template slot="text">Custom warning text!</template> </warning>
如何使用命名槽来覆盖父组件中warning
组件的各个部分,一个级别?
<component-with-a-warning>
<template slot="text">Custom warning text!</template>
</component-with-a-warning>
我在JS小提琴中更好地说明了这个问题。 https://jsfiddle.net/madhazelnut/pdzoeqj0/
答案 0 :(得分:1)
如果我正确理解了您的问题,您希望将组件包装在另一个组件中,并且可以选择从外部组件上定义的插槽中指定内部组件的插槽。
slot="name"
也可以通过向其添加Vue.component('warning', {
template: '#warning',
});
Vue.component('wrapped-warning', {
template: '#wrapped-warning',
});
new Vue({
el: '#app',
});
属性在另一个组件的插槽中呈现,就像您要在插槽中呈现的任何其他组件一样。
.warning {
background-color: gold;
margin: 10px 0;
}
&#13;
<script src="https://unpkg.com/vue"></script>
<template id="warning">
<div class="warning">
<h1><slot name="heading"></slot></h1>
<div><slot name="text"></slot></div>
</div>
</template>
<template id="wrapped-warning">
<warning>
<slot name="heading" slot="heading">Default wrapped heading</slot>
<slot name="text" slot="text">Default wrapped text</slot>
</warning>
</template>
<div id="app">
<wrapped-warning></wrapped-warning>
<wrapped-warning>
<template slot="heading">Overridden heading</template>
<template slot="text">Overridden text</template>
</wrapped-warning>
</div>
&#13;
#include <stdlib.h> /// need this for srand() -- for random numbers
#include <time.h> /// need this for time() -- time
#include <iostream> /// need this for cout<< and cin>>
using namespace std; /// need this for cout<< and cin>>
int roll1,roll2,UserRoll;
char keep;
void roll()
{
roll1 = 1+rand()%6; /// make a random number for die # 1 for user
roll2 = 1+rand()%6; /// make a random number for die # 2 for user
UserRoll = roll1 + roll2; /// totals the sum of die 1 and die 2 for the user
}
int main()
{
int iseed = (int)time(0);
srand(iseed);
cout << "Beat the computer! \n";
roll();
do
{
cout << "You rolled a " << roll1 << " and a " << roll2 << " for a total of: " << UserRoll << "\n";
cout << "\n";
do
{
cout << "Would you like to keep this total, or roll again? \n";
cout << "\n";
cout << "Enter \"K\" for keep and \"R\" for roll again: \n";
cin >> keep;
if (keep != 'K' && keep != 'R')
{
cout << "That is not a valid choice. Please choose Y to keep your total or N to roll again. " << endl;
cout << "\n";
}
} while(keep != 'K' && keep != 'R');
if (keep == 'R')
{
cout << "You chose R--let's roll again. \n";
roll();
}
else
{
cout << "Great! Your total is " << UserRoll << "\n";
}
} while (keep == 'R');
int roll3 = 1+rand()%6; /// make a random number for die # 1 for computer
int roll4 = 1+rand()%6; /// make a random number for die # 2 for computer
int ComputerRoll = roll3 + roll4; /// totals the sum of die 1 and die 2 for the computer
cout << "The computer rolled a " << roll3 << " and a " << roll4 << " for a total of: " << ComputerRoll << "\n";
cout << "\n";
if (ComputerRoll < UserRoll)
{
cout << "Congratulations! You won! \n";
}
if (ComputerRoll > UserRoll)
{
cout << "Sorry. You lose. \n";
}
if (ComputerRoll == UserRoll)
{
cout << "It's a tie. \n";
}
return 0;
}
/*
SAMPLE RUNS:
------------
Beat the computer!
You rolled a 2 and a 4 for a total of: 6
Would you like to keep this total, or roll again?
Enter "K" for keep and "R" for roll again:
R
You chose R--let's roll again.
You rolled a 4 and a 4 for a total of: 8
Would you like to keep this total, or roll again?
Enter "K" for keep and "R" for roll again:
R
You chose R--let's roll again.
You rolled a 4 and a 1 for a total of: 5
Would you like to keep this total, or roll again?
Enter "K" for keep and "R" for roll again:
R
You chose R--let's roll again.
You rolled a 5 and a 5 for a total of: 10
Would you like to keep this total, or roll again?
Enter "K" for keep and "R" for roll again:
R
You chose R--let's roll again.
You rolled a 6 and a 1 for a total of: 7
Would you like to keep this total, or roll again?
Enter "K" for keep and "R" for roll again:
R
You chose R--let's roll again.
You rolled a 5 and a 2 for a total of: 7
Would you like to keep this total, or roll again?
Enter "K" for keep and "R" for roll again:
R
You chose R--let's roll again.
You rolled a 6 and a 6 for a total of: 12
Would you like to keep this total, or roll again?
Enter "K" for keep and "R" for roll again:
K
Great! Your total is 12
The computer rolled a 3 and a 1 for a total of: 4
Congratulations! You won!
Process returned 0 (0x0) execution time : 19.487 s
Press any key to continue.
*/
&#13;