vue前端开发自学,插槽练习,同时渲染父子组件的数据信息

vue前端开发自学,插槽练习,同时渲染父子组件的数据信息！

如果想在slot插槽出口里面，同时渲染出来，来自父组件的数据，和子组件自身的数据呢。又有点绕口了。vue官方给的解决办法是。需要借助于，父组件的自定义属性。

如图，这是父组件里面，我们定义了2个具名的插槽内容。准备将来让它们都在子组件里渲染出来。里面可以看到。我们加入了自定义属性。【slotProps】。这个东西，就是接收数据用的。它可以接收到来自子组件传递过来的数据信息。

如图，这个就是子组件的内容了。很明显。里面绑定了自定义属性。第一个插槽里叫msg；第二个插槽里叫job。这2个自定义属性，会被传递到父组件里面对应的各自的Props里面去。它是一个对象，直接使用点操作，就能点出来。代码写的很清楚。