Component 组件props 属性设置

简介: Component 组件props 属性设置

props选项就是设置和获取标签上的属性值的,例如我们有一个自定义的组件,这时我们想给他加个标签属性写成 意思就是熊猫来自中国,当然这里的China可以换成任何值。定义属性的选项是props。


一、定义属性并获取属性值



定义属性我们需要用props选项,加上数组形式的属性名称,例如:props:['here']


在组件的模板里读出属性值只需要用插值的形式,例如{{ here }}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>component-2</title>
</head>
<body>
    <h1>component-2</h1>
    <hr>
    <div id="app">
      <panda here="China"></panda>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            components:{
                "panda":{
                    template:`<div style="color:red;">Panda from {{ here }}.</div>`,
                    props:['here']
                }
            }
        })
    </script>
</body>
</html>


上面的代码定义了panda的组件,并用props设置了here的属性值,在here属性值里传递了China给组件。 最后输出的结果是红色字体的Panda from China.


二、属性中带’-‘的处理方式



我们在写属性时经常会加入‘-’来进行分词,比如:<panda from-here="China"></panda>,那这时我们在props里如果写成props:['from-here']是错误的,我们必须用小驼峰式写法props:['fromHere']


html文件:

<panda from-here="China"></panda>


javascript文件:

var app=new Vue({
            el:'#app',
            components:{
                "panda":{
                    template:`<div style="color:red;">Panda from {{ here }}.</div>`,
                    props:['fromHere']
                }
            }
        })


PS:因为这里有坑,所以还是少用‘-’为好


三、在构造器里向组件中传值



把构造器中data的值传递给组件,我们只要进行绑定就可以了。就是我们第一季学的v-bind:xxx.


我们直接看代码:


Html文件:

<panda v-bind:here="message"></panda>


javascript文件:

var app=new Vue({
            el:'#app',
            data:{
               message:'SiChuan' 
            },
            components:{
                "panda":{
                    template:`<div style="color:red;">Panda from {{ here }}.</div>`,
                    props:['here']
                }
            }
        })


目录
相关文章
|
4月前
|
前端开发
forwardRef的简单使用:用于解决父组件传递ref给子组件的问题
forwardRef的简单使用:用于解决父组件传递ref给子组件的问题
198 2
|
1月前
|
缓存 JavaScript Java
vue2知识点:组件的props属性、非props属性、props属性校验
vue2知识点:组件的props属性、非props属性、props属性校验
38 4
|
2月前
|
前端开发
React属性之context属性
React中的Context属性用于跨组件传递数据,通过Provider和Consumer组件实现数据的提供和消费。
36 3
|
2月前
|
存储 JSON JavaScript
组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听
详细介绍了微信小程序中组件的创建、引用(包括局部引用和全局引用)、样式隔离、组件的data、methods和properties,以及组件的数据监听器的使用方法和场景。
组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听
|
2月前
|
前端开发 JavaScript
React 中的 props 属性传递技巧
【9月更文挑战第6天】本文详细介绍了React中`props`的基本用法,包括传递基本数据类型、对象和数组。文章通过多个代码示例展示了如何正确使用`props`,并探讨了常见的问题及解决方法,如`props`不可变性、默认值设置及类型检查等。正确掌握这些技巧有助于提升编程效率,编写出更健壮的代码。
72 13
|
3月前
|
前端开发 JavaScript
|
6月前
|
JavaScript 前端开发 容器
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
130 1
|
JavaScript
Vue 父组件向子组件传参 props 属性
Vue 父组件向子组件传参 props 属性
|
JavaScript
Vue获取子组件实例对象 ref 属性
Vue获取子组件实例对象 ref 属性
173 0
|
JavaScript 容器
vue自定义接收父组件传输的值(不使用props )$attrs
vue自定义接收父组件传输的值(不使用props )$attrs
118 0
vue自定义接收父组件传输的值(不使用props  )$attrs