523 vue (组件初步)

Posted 2020-11-08 xfym888

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了523 vue (组件初步)相关的知识，希望对你有一定的参考价值。

组件的作用,方便代码进行服用.

单个内容定义组件方式1:

//js中定义

vue.component(‘组件名称‘,{template:‘组件内容‘})

//另外仍然需要定义该组件所在的vue对象,否则,组件应用到html的标签中式不会生效的!!!!!!

new vue({el:‘组件所在父级标签id或类之类的‘})

//html中使用:

<父级标签> <!--:必须是已定义过vue对象的标签>

<组件名称>***</组件名称>

</父级标签>

多个内容需要组件循环加载的定义方式

vue.component(‘组件名称‘,{

template:‘<标签>{{绑定属性1}},{{绑定属性2}}</标签>‘‘, //将绑定的多个属性显示到标签里面

props:[‘自定义属性名1‘,‘自定义属性名2‘] //通过自定义的属性来便于html的vue对象标签绑定,已便传递多个值到组件中

}

//多个属性值具体应用到html的方法如下:

<组件名称 v-band:自定义属性1=‘‘传递值1‘‘ v-band:自定义属性2=‘传递值2‘ ></组件名称>

关于template的说明:

组件里面的template 可以包含标签样式,里面的标签并且可以绑定属性,数据,事件,方法

//-----------------------本次测试所用代码-------------------

<!DOCTYPE html>

<head>

<title>Document</title>

</style>

</head>

<body>

</div>

</body>

// 定义一个新组件

Vue.component(‘myzj‘,{

template:‘<p>下标{{sindex}}内容是{{shuxin}}</p>‘,

props:[‘shuxin‘,‘sindex‘] //用props关键字自定义shuxin sindex两个属性

})

new Vue({el:‘#zuj‘,

data:{

szz:[‘1111‘,‘22222‘,‘3333‘]

}

})

</script>

</html>

以上是关于523 vue (组件初步)的主要内容，如果未能解决你的问题，请参考以下文章

Vue初步了解组件——父子组件

vue 初步了解provide/inject