Component 组件props 属性设置

props定义属性并获取属性值

html

<div id="app">
        <!-- 注册一个全局逐渐 -->  <!-- 注意如果自定义的属性带-像下面这个h-hehe,在props里面就要写驼峰写法,还有反过来就不行,你比如自定义标签用驼峰写法就报错 -->
        <!-- 可以不绑定属性,那就不用写v-bind了 -->
        <register v-bind:h-hehe="haha"></register>
</div>

js

var  demoTmp ={
    // 注意只有data赋值的地方是属性值,这里两个都是hehe,自定义的属性,而不是属性值haha
    template:`<h2>{{message}}--{{hHehe}}</h2>`,
    props:["hHehe"],
    data:function(){
        return{
            message:"内部组件components"
        }
    }
}
       var vm = new Vue({
          el:"#app",
          data:{
            haha:"props定义属性并获取属性值"
          },
          components:{
          ‘register‘:demoTmp
          }
       })
时间: 2024-09-29 20:07:43

Component 组件props 属性设置的相关文章

React Native入门(三)组件的Props(属性)和State(状态)

相关文章 React Native入门系列 前言 在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性.样式等等.同样的,React Native中的组件也有属性.样式和状态. 1.Props(属性) 组件创建时会设置一些参数来定制这个组件,这些参数就是属性,属性一旦设定,在组件的生命周期中就不会改变.下面拿Image的source属性和Text的onPress属性作为举例. Image的source属性 import React, {Component} from 're

vue笔记2——component组件

组件其实就是自定义的标签. 一.全局化注册组件 组件中第一个参数是组件名,第二个参数是一个对象,里面可以放模板等内容 二.局部注册组件 局部的就是在构造器里面定义,在构造器里面可以定义多个组件,所以components必须加s,仍是以对象的形式.但是里面内容必须以字符串的形式加双引号. 注意:自定义指令和自定义组件的区别 自定义指令定义的是标签指令,而自定义组件定义的是标签,且自定义组件可以在里面添加属性. 三.自定义组件的props属性设置 props选项就是设置和获取标签上的属性值,可以在自

组件的props属性和state状态

props属性: 我使用代码来说明React中props属性: // Profile.jsx import React from 'react' ; export default Class Profile extends React.Component { // render 是这个组件渲染的Vitrual DOM结构 render() { return ( <div className-"profile-component"> </*this.props就是传入的

创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `function`的形式在创建,并且该组件是无state状态的.具体的创建形式如下 1 import React from 'react '; 2 3 //定义一个React组件 4 function App() { 5 return ( 6 <div> 7 hello React... 8 </div

【Vue】组件watch props属性值

#HTML<div id="example"> <p> <child :msg="msg"></child> </p> <p> <button @click='props'>改变props</button> </p> </div> #JS Vue.component('child', { props: ['msg'], computed: { va

Angular2组件开发—属性与事件(一)

属性声明 - 暴露成员变量 属性是组件暴露给外部世界的调用接口,调用者通过设置不同的属性值来定制 组件的行为与外观: 在Angular2中为组件增加属性接口非常简单,只需要在Component注解的properties属性中声明组件的成员变量就可以了: 1 //EzCard 2 @Component({ 3 properties:["name","country"] 4 }) 上面的代码将组件的成员变量name和country暴露为同名属性,这意味着在EzApp的模

React的state属性与props属性

state属性和props属性是隶属于React的component的两个重要属性 在React中,每一个class(类)和面向对象的函数一样,都有一个构造函数constructor(),可以对对象.属性等进行初始化,因此要初始化state,可以将其放在:   state属性     constructor(){ //初始化对象.属性等 } import React from 'react'; export default class BodyIndex extends React.Compon

React学习笔记 - 组件&amp;Props

React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你就只需专注于构建每一个单独的部件. 组件接收props,返回react元素. 1. 函数定义\类定义组件 最简单组件方式 - 函数定义组件: // 函数定义组件 function Welcome(props) { return <h1>Hello, {props.name}!</h1>

Salesforce Lightning开发学习(二)Component组件开发实践

lightning的组件区分标准组件.自定义组件和AppExchange组件.标准组件由SF提供,自定义组件由developer自行开发,AppExchange组件由合作伙伴建立.下面我们写一个简单的列表demo来学习下自定义开发组件Component. 第一步:新建一个对象:电影,API:Movie__c,下表是其相关的字段   字段名 字段API 字段类型 描述 电影名称 Name 文本   主演 ToStar__c 文本(255)   主题曲 Theme__c 文本(255)   导演 D