Ranura de alcance
manual oficial de vue.js
Declaración oficial: a veces es útil permitir que el contenido de la ranura acceda a los datos solo en los subcomponentes
Explicación:
<!--自定义的组件模板-->
<span>
<slot>{
{ user.lastName }}</slot>
</span>
<!--调用组件-->
<current-user>
{
{ user.firstName }}
</current-user>
current-userEs un componente definido por nosotros mismos. Al definir el componente, establecemos un objeto dentro de los datos del componente user, y su valor es {firstName: "尤", lastName: "雨溪"}, cuando lo usamos, esperamos {
{ user.firstName }}reemplazar el contenido de la copia de seguridad en el componente {
{user.lasttName}}con el código anterior. Simplemente ejecute de acuerdo con el código anterior y se informará un error ( Error in render: "TypeError: Cannot read property 'firstName' of undefined"), la razón es que los datos del componente y los datos de la página son independientes entre sí.
Solución: use v-slot para extraer el objeto de la ranura y llamar al subcomponente
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>作用域插槽</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<current-user v-slot="randomStr"> <!--randomStr为任意值,根据自己的喜好选择-->
{
{randomStr.user.firstName}} <!--randoms.Xxx .Xxx后面的是组件:user="user"-->
</current-user> <!--randoms.Xxx .Xxx后面的是组件:Xxx="user"-->
</div>
<script>
Vue.component("current-user", {
data() {
return {
user: {
firstName: "尤", lastName: "雨溪" },
};
},
template: `
<span>
<slot :user="user">{
{ user.lastName }}</slot>
</span>
`,
});
var vm = new Vue({
el: "#app",
data() {
return {
};
},
methods: {
},
});
</script>
</body>
</html>
Diagrama:
