威尼斯wns.9778官网活动_vnsc威尼斯城官网

热门关键词：　威尼斯wns.9778官网活动,vnsc威尼斯城官网
当前位置：威尼斯wns.9778官网活动 > 计算机教程 > Vue props 单向数据流

Vue props 单向数据流

文章作者：计算机教程 上传时间：2019-05-10

1、props通信

测试代码

注意：DOM模板的驼峰命名props要转为短横分割命名。

创键组件

两种方式：
方法一：使用Vue.extend({})

var component = Vue.extend({
  template: '<div>component</div>'
});
// 里面还可以添加其他的属性

方法二：使用字面量

 var component = {
   template: '<div>component</div>'
}

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <my-component message='来自父组件的数据' warning-text="提示信息"></my-component>

        </div>
        <script src="http://www.itcinternet.net/uploads/allimg/190510/2206454612-0.jpg"></script>
        <script type="text/javascript">
            Vue.component('my-component', {
                template: '<div>{{warningText}}：{{message}}</div>',
                props: ['message', 'warningText']
            })
            new Vue({
                el: "#app"
            })
        </script>
    </body>

</html>

注册组件

全局注册
语法：

Vue.component('my-component', {
  // 选项
})

示例：

// 创建组件
var component = {template: '<div>component</div>'}
// 全局注册组件

Vue.component('my-component', component);

局部注册

// 创建组件
var component = {template: '<div>component</div>'}
// 在 Vue组件实例内注册component组件，该组件只能在该实例中使用
var vm = new Vue({
            el: '#app',
            components: {
                'mycomponent ': component ,
            }
        })

传递动态数据（v-bind）：

注意点：

  • HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名：
Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],      // 这里使用的是驼峰式命名
  template: '{{ myMessage }}'
})
// 在下面的HTML文件中引用时，需要改为kebab-case的形式，也就是短横线隔开
<child my-message="hello!"></child>

威尼斯wns.9778官网活动，如果你使用字符串模版，则没有这些限制。

注意（谨记）：在HTML中，属性是不区分大小写的，例如：class、Class或CLASS都是表示class，因此，当在Vue中使用props向子组件传递数据时，如果props是驼峰式命名，那么在HTML文件中使用时，需要修改为kebab-case（短横线隔开式或称为烤肉串）的形式，否则，Vue将会无法解析

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <input type="text" v-model="parentMessage" />
            <my-component :message='parentMessage'></my-component>

        </div>
        <script src="http://www.itcinternet.net/uploads/allimg/190510/2206454612-0.jpg"></script>
        <script type="text/javascript">
            Vue.component('my-component', {
                template: '<div>{{message}}</div>',
                props: ['message']
            })
            new Vue({
                el: "#app",
                data: {
                    parentMessage: ''
                }
            })
        </script>
    </body>

</html>

使用props传递数据

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 可以用在模板内
  // 同样也可以在 vm 实例中像“this.message”这样使用
  template: '{{ message }}'
})
// 通过下面这种方式传递数据
<child message="hello!"></child>

2、单向数据流

动态prop

将父组件的数据通过v-bind绑定到子组件上，与绑定HTML特性是一样的；每当父组件的数据变化都会反映到子组件上

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

（1）子组件保存父组件传递过来的值，在子组件自己的作用域下修改和使用。

字面量语法 VS 动态语法

初学者常犯的一个错误是使用字面量语法传递数值：

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>

因为它是一个字面 prop，它的值是字符串 "1" 而不是 number。如果想传递一个实际的 number，需要使用 v-bind，从而让它的值被当作 JavaScript 表达式计算：

<!-- 传递实际的 number -->
<comp v-bind:some-prop="1"></comp>

通过v-bind:some-props="1"传递的是一个number，而通过some-prop="1"传递的是一个 字符串

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">

            <my-component :init-count='1'></my-component>

        </div>
        <script src="http://www.itcinternet.net/uploads/allimg/190510/2206454612-0.jpg"></script>
        <script type="text/javascript">
            Vue.component('my-component', {
                template: '<div>{{initCount}}</div>',
                props: ['initCount'],
                data: function() {
                    return this.initCount
                }
            })
            new Vue({
                el: "#app"
            })
        </script>
    </body>

</html>

props数据校验

Vue.component("example", {
  props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
});

注意：props会在组件实例创建之前进行校验，所以在default、validator函数里，诸如：data, computed或methods等实例属性都无法使用

（2）使用计算属性

非props特性传递

在Vue中，在大多数情况下，传递给组件的值会覆盖组件本身就设定的值，例如传递type=large会覆盖组件上的type=small，且有可能破坏该组件，但是，对于class和style特性在传递时，不会发生覆盖，只会合并，假如组件上class=one，又传递class=two，则最终组件的class= one two；

本文由威尼斯wns.9778官网活动发布于计算机教程,转载请注明出处：Vue props 单向数据流

关键词：

推荐信息