Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/audio/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Vuejs2 无法将Vue.JS中所属组件和父上下文的数据传递到插槽_Vuejs2 - Fatal编程技术网

Vuejs2 无法将Vue.JS中所属组件和父上下文的数据传递到插槽

Vuejs2 无法将Vue.JS中所属组件和父上下文的数据传递到插槽,vuejs2,Vuejs2,在下面的代码中,我有父/子组件,其中一些数据(我只是使用文字)从根上下文(data1)传递,而其他数据应用于父组件(data2)内的插槽。输出显示data1可用,但data2不可用 为什么data2文本没有传递给子组件?我在谷歌上看到过使用范围为的模板的引用,但我不明白为什么在本例中我没有使用v-bind 我怀疑我误解了什么,但我当然会感谢你的帮助 Vue.component( “孩子”{ 道具:['data1','data2'], 模板:` 子组件-data1:“{{data1}}”,dat

在下面的代码中,我有父/子组件,其中一些数据(我只是使用文字)从根上下文(data1)传递,而其他数据应用于
父组件(data2)内的
插槽。输出显示data1可用,但data2不可用

为什么data2文本没有传递给子组件?我在谷歌上看到过使用范围为的
模板
的引用,但我不明白为什么在本例中我没有使用
v-bind

我怀疑我误解了什么,但我当然会感谢你的帮助

Vue.component(
“孩子”{
道具:['data1','data2'],
模板:`
子组件-data1:“{{data1}}”,data2:“{{data2}”

` } ) Vue组件( “家长”{ 模板:` 父组件

` } ) 新Vue({ el:“#el”, 模板:` ` })

您似乎以一种稍微错误的方式对插槽机制进行了概念化:

  • 从父级到子级的数据传输通过在子级中声明并在父级中定义的属性进行
  • 子组件模板的部分可以在父组件中定义。子组件通过插槽机制集成这些部件
  • 模板片段可能包含数据占位符。这些占位符由子组件(即代码段的用户)解析,这是
    slot
    元素发挥作用的地方:其属性实例化参数 这些占位符首先存在的理由可能是它们将由子组件计算
  • 最后,模板片段中需要一个语法挂钩作为占位符标记,因为占位符将由子组件实例化。这是一个JS对象的名称,它将用作实际参数值的容器。由于这些值是由子级指定的,因此如果不放弃(子级)组件的数据封装,就无法事先知道该容器对象的结构,这将破坏组件使用的目的。代码段定义中的“slot scope”属性包含所述JS对象的名称(必要的声明自动在后台进行)
请参见代码:

Vue.component(
“孩子”{
道具:['data1','data2'],
模板:`
子组件

通过父项传递:{{data1}}
从父级传递:{{data2}}

` } ) Vue组件( “家长”{ 道具:['data1'], 模板:` 父组件

{{mixme.data3}}
` } ) // //Vue实例 //该模板仅引用组件“父级”。 //由于“child”嵌入到“parent”中,此组件将在_parent_的模板中引用。 // //还请注意,“data1”作为真实属性而不是DOM属性传递。 // 新Vue({ el:“#el”, 模板:` ` })

您似乎以一种稍微错误的方式对插槽机制进行了概念化:

  • 从父级到子级的数据传输通过在子级中声明并在父级中定义的属性进行
  • 子组件模板的部分可以在父组件中定义。子组件通过插槽机制集成这些部件
  • 模板片段可能包含数据占位符。这些占位符由子组件(即代码段的用户)解析,这是
    slot
    元素发挥作用的地方:其属性实例化参数 这些占位符首先存在的理由可能是它们将由子组件计算
  • 最后,模板片段中需要一个语法挂钩作为占位符标记,因为占位符将由子组件实例化。这是一个JS对象的名称,它将用作实际参数值的容器。由于这些值是由子级指定的,因此如果不放弃(子级)组件的数据封装,就无法事先知道该容器对象的结构,这将破坏组件使用的目的。代码段定义中的“slot scope”属性包含所述JS对象的名称(必要的声明自动在后台进行)
请参见代码:

Vue.component(
“孩子”{
道具:['data1','data2'],
模板:`
子组件

通过父项传递:{{data1}}
从父级传递:{{data2}}

` } ) Vue组件( “家长”{ 道具:['data1'], 模板:` 父组件

{{mixme.data3}}
` } ) // //Vue实例 //该模板仅引用组件“父级”。 //由于“child”嵌入到“parent”中,此组件将在_parent_的模板中引用。 // //还请注意,“data1”作为真实属性而不是DOM属性传递。 // 新Vue({ el:“#el”, 模板:` ` })


感谢@collapsar的详细回复。我认为我对数据流的方向有正确的想法,我在文档中看到了
插槽范围
,但我不得不承认我不喜欢,因为它感觉封装被破坏了,提供模板的家长需要从孩子内部了解细节。我已经更新了我的问题,加入了另一个更具体的例子,尽管在这个方法中我只是尝试合并一个类。对于像我这样困惑的人,这里有一篇关于定义插槽和作用域插槽的好文章:感谢@collapsar的详细回答。我认为我对数据的方向有正确的想法