学习vue5_组件

Posted 2020-09-22 鱼大饼

<ul> ， <ol>， <table> ， <select> 限制了能被它包裹的元素， <option> 只能出现在其它元素内部。

在自定义组件中使用这些受限制的元素时会导致一些问题，例如：

<table>

<my-row></my-row>

</table>

自定义组件 <my-row> 被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的 is 属性：

<table>

<tr is="my-row"></tr>第三

</table>

2 组件中的data必须是函数

components:{
　　‘my-component‘: {
　　　　template:‘<tr>{{aa}}</tr>‘,
　　　　data:function(){
　　　　　　return {aa:‘aaaaaaaaaaaaaaaaa‘}
　　　　}
　　}
}

3

Vue.component(‘todo-item‘, {
　　props: [‘todo‘],
　　template: ‘<li>{{ todo.text }}</li>‘
　　})
var app7 = new Vue({
　　el: ‘#app-7‘,
　　data: {
　　groceryList: [
　　　　{ text: ‘蔬菜‘ },
　　　　{ text: ‘奶酪‘ },
　　　　{ text: ‘随便其他什么人吃的东西‘ }
　　　　]
　　},
})

<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>

props这个有点像data   是渲染的时候传值  

 v-bind:todo="item"  传item给todo