如何将命名槽插入父组件

时间:2018-05-27 01:16:19

标签: vue.js

命名槽在覆盖组件的各个部分时非常有用,如下所示:

<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/

1 个答案:

答案 0 :(得分:1)

如果我正确理解了您的问题,您希望将组件包装在另一个组件中,并且可以选择从外部组件上定义的插槽中指定内部组件的插槽。

slot="name"也可以通过向其添加Vue.component('warning', { template: '#warning', }); Vue.component('wrapped-warning', { template: '#wrapped-warning', }); new Vue({ el: '#app', });属性在另一个组件的插槽中呈现,就像您要在插槽中呈现的任何其他组件一样。

&#13;
&#13;
.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;
&#13;
&#13;