老师好，我有两个问题

1）v-for循环出来的数据如果一定要用v-blind接受吗

2）这里怎么用作用插槽的方法打印出每个选项卡呢

我是想通过作用域插槽打印出上面的选项卡的,但是一直都在报错

3)class的部分，为什么加入多个的class呢，如果用data数据的话是不是从父组件里获得
<!DOCTYPE html>

<head>

<style>

.swtich{display: flex;justify-content: center;align-items: center;}

.btn{padding: 10px 20px;

border-radius: 5px;

outline: none;

border: 1px solid gray;

cursor: pointer;}

.actived{background-color: gray;}

</style>

</head>

<body>

</div>

</div>

Vue.component('TabBarone',{

template:'<div>前端工程师</div>'

})

Vue.component('TabBartwo',{

template:'<div>Java工程师</div>'

})

Vue.component('TabBarthree',{

template:'<div>软件测试工程师</div>'

})

var vm = new Vue({

el: "#root",

data:{

list:['前端工程师', 'Java工程师', '软件测试工程师'],

actedindex:"0",

actived:["TabBarone","TabBartwo","TabBarthree"]

methods:{

handleClick:function(index){

this.actedindex = index

}

})

</script>

</body>

</html>

慕雪9296518 2020-07-29

源自：vue基础入门 4-16 自由编程

收起

2回答

好帮手慕久久 2020-07-30 11:34:02

同学你好，问题解答如下：

1.当父组件给子组件传值时，才会用到props接收，即子组件中，用到的某个数据，需要由父组件传过来，此时就需要props接收，如下：

而这个例子中，子组件不需要父组件传值，所以不用props接收。

同学这样理解也可以，即子组件的内部不使用父组件上的数据，就不用props接收。

2. 如果想使用多个插槽，可以如下这样写：

3. test组件内的插槽使用的数据list，是子组件内部的，该list不是从父组件接收来的。子组件利用该数据，进行循环遍历多个插槽，然后在插槽上绑定数据，绑定的这些数据，会传到外面，即传到父组件内，过程如下：

同学可以再理解一下。

祝学习愉快！

收起回答

好帮手慕久久 2020-07-29 19:08:13

同学你好，问题解答如下：

1. v-bind是给元素绑定数据，它是框架规定的固定用法，当给div绑定index属性时，只能用“:index= index”这种写法（“：”是v-bind的简写形式）。

2. 改写可参考如下形式：

3. class部分，由于按钮的样式，是受两个类名控制的，如下：

所以此处写了两个类名。

class中的数据“actedindex”是从父组件data中获取的。

另外，初始状态下，第一个按钮样式应该是激活状态的，所以需要修改如下：

如果我的回答帮到了你，欢迎采纳，祝学习愉快！

收起回答

提问者慕雪9296518 #1

1）v-bind绑定数据不需要props接收吗？？好像之前都有写，还是说只要模板templatwqe中没用到或者没在data或者method中作为值或者参数就不用接收？？？ 2）如果选项卡三个都用作用域插槽的方式呢？ <template slot-scope="props"> <div>{{props.items}} </template> vue.component({ template:<div><slot v-for="item for list" :item=item><slot></div> }) 并且这里list不是从父组件接收数据吗，我看课件说的解释是当子组件要做循环时或者它的一部分要外部传递时，这个外部传递不就是从父组件中直接获取list数据吗

2020-07-30 09:49:22