Vuejs 组件——props数据传递的实例代码

本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#Props

本文是在官方文档的基础上,更加细致的说明,代码更多更全。

简单来说,更适合新手阅读

props数据传递

①组件实例的作用域:

是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享。

<div id="app">
  <add></add>
  <del></del>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    components: {
      "add": {
        template: "<button>btn:{{btn}}</button>",
        data: function () {
          return {btn: "123"};
        }
      },
      del: {
        template: "<button>btn:{{btn}}</button>",
        data: function () {
          return {btn: "456"};
        }
      }
    }
  });
</script>

渲染结果是:

2个按钮,第一个的值是123,第二个的值是456(虽然他们都是btn)

②使用props绑定静态数据:

【1】这种方法用于传递字符串,且值是写在父组件自定义元素上的。

【2】下面示例中的写法,不能传递父组件data属性中的值

【3】会覆盖模板的data属性中,同名的值。

示例代码:

<div id="app">
  <add btn="h"></add>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      h: "hello"
    },
    components: {
      "add": {
        props: ['btn'],
        template: "<button>btn:{{btn}}</button>",
        data: function () {
          return {btn: "123"};
        }
      }
    }
  });
</script>

这种写法下,btn的值是h,而不是123,或者是hello。

【4】驼峰写法

假如插值是驼峰式的,而在html标签中,由于html的特性是不区分大小写(比如LI和li是一样的),因此,html标签中要传递的值要写成短横线式的(如btn-test),以区分大小写。

而在props的数组中,应该和插值保持一致,写成驼峰式的(如btnTest)。

例如:

props: ['btnTest'],
template: "<button>btn:{{btnTest}}</button>", 

正确的写法:

<add btn-test="h"></add> 

假如插值写短横线式,或者是html标签写成驼峰式,都不能正常生效。(除非插值不写成驼峰式——跳过大小写的限制,才可以)

③利用props绑定动态数据:

简单来说,就是让子组件的某个插值,和父组件的数据保持一致。

标准写法是(利用v-bind):

<add v-bind:子组件的值="父组件的属性"></add> 

如代码

<div id="app">
  <add v-bind:btn="h"></add>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      h: "hello"
    },
    components: {
      "add": {
        props: ['btn'],
        template: "<button>btn:{{btn}}</button>",
        data: function () {
          return {'btn': "123"}; //子组件同名的值被覆盖了
        }
      }
    }
  });
</script>

说明:

【1】btn使用的父组件data中 h的值;

【2】子组件的data的函数中返回值被覆盖了。

【3】也就是说,使用v-bind的是使用父组件的值(根据属性名),没有使用v-bind的是将标签里的数值当做字符串来使用。

【4】依然需要使用props,否则他会取用自己data里的btn的值

④字面量和动态语法:

【1】简单来说,不加v-bind的,传递的是字面量,即当做字符串(例如1也是字符串,而不是number类型);

【2】加上v-bind的,传递的是JS表达式(因此才能传递父组件的值);

【3】加上v-bind后,如果能找到父组件的值,那么使用父组件的值;如果没有对应的,则将其看做一个js表达式(例如1+2看做3,{a:1}看做是一个对象);

如代码:

<div id="app">
  <add v-bind:btn="1+2"></add>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      h: "hello"
    },
    components: {
      "add": {
        props: ['btn'],
        template: "<button>btn:{{btn}}</button>"
      }
    }
  });
</script>

这里的btn的值是3(而不是没有加v-bind时,作为字符串的1+2)

⑤props的绑定类型:

【1】简单来说,分为两种类型,即单向绑定(父组件能影响子组件,但相反不行)和双向绑定(子组件也能影响父组件);

【2】单向绑定示例:(默认,或使用.once)

<div id="app">
  父组件:
  <input v-model="val"><br/>
  子组件:
  <test v-bind:test-Val="val"></test>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      val: 1
    },
    components: {
      "test": {
        props: ['testVal'],
        template: "<input v-model='testVal'/>"
      }
    }
  });
</script>

说明:

当父组件的值被更改后,子组件的值也随之更改;

当子组件的值被更改后,父组件的值不会变化,而假如再次修改父组件的值,子组件会再次同步。

另外需要注意的是,子组件如果要同步绑定,那么子组件的input需要是v-model,而不能是value属性(那样只能单项绑定,且修改子组件的值后会失去绑定)

【3】双向绑定:

需要使用“.sync”作为修饰词

如示例:

<div id="app">
  父组件:
  <input v-model="val"><br/>
  子组件:
  <test :test.sync="val"></test>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      val: 1
    },
    components: {
      "test": {
        props: ['test'],
        template: "<input v-model='test'/>"
      }
    }
  });
</script>

效果是无论你改哪一个的值,另外一个都会随之变动。

【4】props验证:

简单来说,当组件获取数据时,进行验证,只有符合条件的时候,才会使用之。

写法是将props变为一个对象,被验证是值是对象的key,验证条件是和key对应的value。

例如:

props: {
  test: {
    twoWay: true
  }
},

验证test这个变量是不是双向绑定,如果不是,则报错。(注意,这个不能用于验证单向绑定)。

示例代码如下:

<div id="app">
  父组件:
  <input v-model="val"><br/>
  子组件:
  <test :test="val"></test>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      val: 1
    },
    components:{
      test:{
        props: {
          test: {
            twoWay: true
          }
        },
        template: "<input v-model='test'/>"
      }
    }
  });
</script>

更多验证类型请查看官方教程:http://cn.vuejs.org/guide/components.html#Prop__u9A8C_u8BC1

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vuejs第九篇之组件作用域及props数据传递实例详解

    本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#Props 本教程是小编结合官方文档整理的一套更加细致,代码更多更全的教程,特别适合新手阅读. props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <sc

  • VueJs组件prop验证简单介绍

    组件 Vue.js引入的组件,让分解单一HTML到独立组件成为可能.组件可以自定义元素形式使用,或者使用原生元素但是以is特性做扩展. 今天看了vuejs的组件,看到了prop组件,主要作用是在传入数据的时候对传入的值做判断,写了个小例子. <div id="app"> <my-child :num="100" :msg="'sdf'" :object="{a:'a'}" :cust="100&qu

  • VueJS组件之间通过props交互及验证的方式

    props 是父组件用来传递数据的一个自定义属性.父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop". 父组件通过props将数据传递给子组件 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

  • Vuejs 组件——props数据传递的实例代码

    本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#Props 本文是在官方文档的基础上,更加细致的说明,代码更多更全. 简单来说,更适合新手阅读 props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <scr

  • angularjs2中父子组件的数据传递的实例代码

    父到子组件之间的数据传递 父组件模板中引用子组件 // father template: ... <child-item [name] = "fatherItemName" > </child-item> //...` 其中"fatherItemName" 为父组件中的属性,[name] 为子组件的输入 在子组件中使用 @Input() name 来接受父组件传递的值 如果在接收值前需要进行一些处理,可以使用setter 拦截输入属性 _na

  • Vue.js组件props数据验证实现详解

    本文实例为大家分享了Vue.js组件props数据验证的具体代码,供大家参考,具体内容如下 数据验证 一般当组件需要提供给别人使用时,就需要使用数据验证. 示例: <script> Vue.component('my-component',{ props:{ //必须是数字类型 propA: Number, //必须是字符串或数字类型 propB:[String, Number], //布尔值,如果没有定义,默认值就是true propC:{ type: Boolean, default: t

  • vue组件之间数据传递的方法实例分析

    本文实例分析了vue组件之间数据传递的方法.分享给大家供大家参考,具体如下: 1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sexVal = '男'  把该值传递给 子组件(B.vue),如下: App.vue <template> <div id="app"> <!--<router-view>&

  • Vue 父子组件的数据传递、修改和更新方法

    父子组件之间的数据关系,我这边将情况具体分成下面4种: 父组件修改子组件的data,并实时更新 子组件通过$emit传递子组件的数据,this.$data指当前组件的data(return{...})里的所有数据, this.$emit('data',this.$data); 之后通过父组件的getinputdata方法来接收数据 @data='getinputdata' 其中的data就是传过来的数据,通过修改这个数据就可以通过父组件实时更新子组件 getinputdata(data) { c

  • Vue2.0组件间数据传递示例

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有的后代 Vue2.0后$dispatch(),$broadcast()被弃用,见https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换 1,父组件向子组件传递场景:Father上一个输入框,根据输入传递到Child组件

  • Vue组件间数据传递的方式(3种)

    vue中传递数据的方式有哪些 数据流的方式传递数据 通过 props 传递属性 父级给demo2组件绑定一个msg数据 父组件 <template> <div class='container'> <demo2 :msg="msg" @change="change" /> </div> </template> <script> import demo2 from './demo2' export

  • Vue父组件和子组件之间数据传递和方法调用

    vue组件在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性. 父组件向子组件传值(子组件主动获取父组件的数据和方法) 父组件import引用子组件 使用子组件时在子组件上添加一个v-bind属性,并绑定上数据 在子组件中创建 props ,在props 中创建相同的属性名,用来接收数据 把接收到的数据在子组件中使用 子组件向父组件传值(父组件主动获取子组件的数据和方法) 子组件中需要发出该自定义

  • Django中使用jquery的ajax进行数据交互的实例代码

    jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择 最终实现效果如图: 将jquery文件拷贝到static/js/目录下 打开booktest/views.py文件,定义视图area1,用于显示下拉列表 #提供显示下拉列表的控件,供用户操作 def area1(request): return render(request,'booktest/area1.html') 打开bo

随机推荐