组件(2)：使用Prop下发数据

tianhang 发布于2019-08-22 15:20 / 3077人阅读

摘要：数据下发组件实例的作用域是相互独立的，父子组件之间无法进行数据的共享。父组件通过下发数据，将父组件属性和子组件特性绑定在一起，在第一文本框输入值改变的内容，子组件的会跟随变化，显示在第二个文本框中。

数据下发

组件实例的作用域是相互独立的，父、子组件之间无法进行数据的共享。
如果想在子组件模板中使用父组件的数据，可以通过Prop将父组件的数据下发到子组件。子组件用props选项声明它预期的数据。

为了传递数据，父组件必须先在子组件自定义标签的特性上绑定数据，绑定的值分两种情况解析:

字面量 prop="value"

表达式（动态绑定） v-bind:prop="expression"

表达式特例 v-bind="Object"

</>复制代码 
new Vue({
    el: "#app-1",
    data: {
        parentMsg: "root"s dynamic data",
        parentObj: {
            text:"hello vue!",
            isShow: true
        },
    },
    components: {
        "component-1": {
            props: ["expectMsg","expectDynamicMsg","expectObj","text","isShow"],
            template: "
            
                {{expectMsg}}
                {{expectDynamicMsg}}
                {{expectObj.text}}
                {{text}}
            "
        }

</>复制代码

这里分别作了几种绑定的示例:

把字符串"static data"绑定到子组件的props的expectMsg上

把父组件属性parentMsg动态绑定到子组件的expectDynamicMsg特性上

把父组件中的一个对象parentObj动态绑定到子组件的expectObj特性上

把父组件中的parentObj对象的属性text、isShow绑定到子组件的text和isShow特性上

注意：要下发一个数字给子组件不能使用字面量绑定，字面量下发的都是字符串。因此需要动态绑定

</>复制代码

Prop验证

当要对下发数据做验证或在无数据时设置默认值，子组件选项props就需要使用一个对象替换数组。
简单的情况：

</>复制代码 
props:{
    someProp:String
}

下发数据必须是一个字符串

复杂点可以设置默认值与验证器，如：

</>复制代码 
new Vue({
    el: "#app-2",
    data:{
        message:{
            title:"prop验证",
            text:"父组件数据"
        }
    },
    components: {
        "component-2": {
            props: {
                propObj:{
                    type:Object,
                    //下发对象的title属性必须是个字符串
                    validator:function(value){
                        return typeof value.title === "string"
                    },
                    //下发数据为一个数组或对象，设置的默认值必须由一个函数返回
                    default:function(){
                        return {title:"prop验证",text:"数组/对象的默认值应当由一个工厂函数返回"}
                    }
                }
            },
            template: "{{propObj.title}}
{{propObj.text}}
"
        }
    }
})

</>复制代码

type属性也可以是一个函数，使用instanceof验证。验证在子组件实例创建之前进行，因此验证里的任何函数都无法使用子组件实例属性。

更多类型验证 Prop验证

Prop的单向绑定和双向绑定

下发数据实际上就是完成一个数据绑定的过程，把组件间的特定数据绑定在一起，默认情况下为单向绑定，子组件的数据对于父组件是透明的，而父组件的数据变化则会引发子组件数据的变化。

</>复制代码 
new Vue({
    el: "#app-3",
    data: {
        content: "please input..."
    },
    components: {
        "component-3": {
            props:["txt"],
            template:"
"
        }
    }
})

</>复制代码

父组件通过Prop下发数据，将父组件属性content和子组件特性txt绑定在一起，在第一文本框输入值改变content的内容，子组件的txt会跟随变化，显示在第二个文本框中。

如果在子模板第二个文本框输入，修改txt的值时，父组件控制的第一个文本框内容不会改变。

并在控制台给出警告，说不要修改props选项中的值，作为代替，可以让prop的值赋予data或者computed属性使用。因此可以像下面这样用data替代prop作为一个局部变量。

</>复制代码 
"component-3": {
    props:["txt"],
    template:"
",
    data:function(){
        return {txtData:this.txt}
    }
}

若只考虑输出不考虑输入，也可以使用计算属性替代

</>复制代码 
"component-3": {
    props: ["txt"],
    template: "
",
    computed: {
        txtComputed:function() {
            return this.txt
        }
    }
}

非Prop特性

组件的作者却并不总能预见到组件被使用的场景。所以，组件可以接收任意传入的特性，这些特性都会被添加到组件的根元素上，而不需要定义响应的props。

</>复制代码 
var vm = new Vue({  
    el: "#app-4",
    components: {  
        "component-4": {  
            template: ""  
        }  
    }  
});

</>复制代码

渲染结果

</>复制代码

其中data-title、class就是非Prop特性。
因为没有在组件中定义props，因此也无法去引用它们，作用目前不明显。

从渲染结果还可以发现，class特性的值由子组件模板和父模板定义的特性合并而成，对于class和style是这样合并结果。但对于多数组件来说，传递给组件的值会覆盖组件本身设定的值。

GPU云服务器云服务器 vuejs组件使用在php中使用组件 asp使用第三方组件 prop()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93385.html

组件(2)：使用Prop下发数据

摘要：数据下发组件实例的作用域是相互独立的，父子组件之间无法进行数据的共享。父组件通过下发数据，将父组件属性和子组件特性绑定在一起，在第一文本框输入值改变的内容，子组件的会跟随变化，显示在第二个文本框中。数据下发组件实例的作用域是相互独立的，父、子组件之间无法进行数据的共享。如果想在子组件模板中使用父组件的数据，可以通过Prop将父组件的数据下发到子组件。子组件用props选项声明它预期...

DoINsiSt 2019-08-01 18:41 评论0 收藏0
组件(3)：自定义事件

摘要：自定义事件自定义事件有能力使子组件事件触发父组件中的动作。它所做的只是报告自己的内部事件，因为父组件可能会关心这些事件。只是这里父组件上的事件功效没有双向绑定中事件那么强大。自定义事件自定义事件有能力使子组件事件触发父组件中的动作。那么父组件如何监听事件呢？可以使用指令v-on:event-name=callback监听。而子组件又是如何触发事件的呢？很简单，调用this.$em...

Yangyang 2019-08-22 15:24 评论0 收藏0
组件(3)：自定义事件

摘要：自定义事件自定义事件有能力使子组件事件触发父组件中的动作。它所做的只是报告自己的内部事件，因为父组件可能会关心这些事件。只是这里父组件上的事件功效没有双向绑定中事件那么强大。自定义事件自定义事件有能力使子组件事件触发父组件中的动作。那么父组件如何监听事件呢？可以使用指令v-on:event-name=callback监听。而子组件又是如何触发事件的呢？很简单，调用this.$em...

RebeccaZhong 2019-08-01 18:41 评论0 收藏0
vue組件自学

摘要：在较高层面上，组件是自定义元素，的编译器为它添加特殊功能。这时可以把特性直接添加到组件上不需要事先定义添加属性之后，它会被自动添加到的根元素上。下面是一个例子在本例中，子组件已经和它外部完全解耦了。 Vue组件什么是组件？组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的...

iKcamp 2019-08-01 17:59 评论0 收藏0
手把手教你学Vue-2(组件开发)

摘要：组件声明组件分为全局的和局部的。父组件通过给子组件下发数据，子组件通过事件给父组件发送消息。以下实例中子组件已经和它外部完全解耦了。 1.vue 组件-声明组件分为全局的和局部的。全局声明 Vue.component(tagName, options) ** 引用组件 // 注册 Vue.comp...

lansheng228 2019-08-30 14:17 评论0 收藏0