Vue中默认插槽,具名插槽,作用域插槽区别详解

默认插槽:Vue中默认插槽,具名插槽,作用域插槽区别详解_第1张图片

App.vue :  在app.vue中使用MyCategory,里面包裹的结构是不显示的,要想在页面中显示,就需要用到插槽。在子组件MyCategory中定义




 Category.vue :在想要放入结构的位置,插入默认插槽,app.vue中在子标签中写的结构才会被插入到插槽的位置。插槽标签里写的文本只有在插槽没数据时候才会显示。





Vue中默认插槽,具名插槽,作用域插槽区别详解_第2张图片

 具名插槽:

Vue中默认插槽,具名插槽,作用域插槽区别详解_第3张图片

App.vue :  可以用多个插槽,插入在不同位置,需要在子组件中定义加上name属性名




Category.vue 就可以定义多个插槽,放在不同位置





Vue中默认插槽,具名插槽,作用域插槽区别详解_第4张图片

作用域插槽Vue中默认插槽,具名插槽,作用域插槽区别详解_第5张图片

 Vue中默认插槽,具名插槽,作用域插槽区别详解_第6张图片

App.vue:最实用的一种,可以实现子组件向父组件的逆向传数据。 父组件中: ,外面必须包着template标签,scope用来接收中传过来的数据,scope这里面的名子自己定义,取games数据时候用自己定义的scope中的名字来取xxx.games,如中定义了其他数据,也可以xxx.msg,这样取定义的其他数据。




Category.vue : 子组件中: 将data中的数据games绑定给games,给插槽传递了games数据





Vue中默认插槽,具名插槽,作用域插槽区别详解_第7张图片

你可能感兴趣的:(linerVue,vue.js,前端,javascript)