vue组件——props的用法

一、组件的全局注册和局部注册

<div id="app">
    <my-component></my-component>
</div>
<script>
    Vue.component('my-component',{
        template:'<div>这是组件的内容</div>'
    });
    var app = new Vue({
        el:'#app'
    })
</script>

其中，‘my-component’是自定义的标签名称，推荐使用小写加上减号的形式书写。

要在父类实例中使用这个组件，必须在实例创建之前注册。

template的DOM结构必须被一个元素包含，不能直接写成“这是组件的内容”。不然无法被渲染。

二、局部注册

在Vue实例中，使用components选项可以注册局部注册组件，注册后的组件只有在该实例的作用域下有效。

<div id="app">
    <my-component></my-component>
</div>
<script>
    var Child = {
        template:'<div>局部组件注册</div>'
    };
    var app = new Vue({
        el:'#app',
        components:{
            'my-component':Child
        }
    })
</script>

组件中还可以像Vue的其他实例一样使用其他的选项，比如data、computed、methods等。但是在使用data时，和实例有区别，data必须是函数，将数据return出去。

<div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
<script>
    var data = {
        counter:0
    };
    Vue.component('my-component',{
        template:'<button @click="counter++">{{counter}}</button>',
        data:function () {
            return data;
        }
    });
    var app = new Vue({
        el:'#app'
    })
</script>

这里罪案一共使用了三次，但是点击任意一个<button>，3个数都会加1，这是因为组件引用的是外部的对象，下面是给组件返回一个新的data对象来独立

<div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
<script>
    //全局注册
    Vue.component('my-component',{
        template:'<button @click="counter++">{{counter}}</button>',
        data:function () {
            return {
                counter:0
            };
        }
    });
    var app = new Vue({
        el:'#app'
    })
</script>

三、使用props传递数据

父组件正向的向子组件中传递数据或者参数，子组件接收到后根据参数的不同执行不同的内容或执行操作，并把它在组件模板中渲染。

<div id="app">
    <my-component message="来自父组件的数据"></my-component>
    <my-component message="来自父组件的数据"></my-component>
    <my-component message="来自父组件的数据"></my-component>
</div>
<script>
    //全局注册
    Vue.component('my-component',{
        props:['message'],
        template:'<div>{{message}}</div>'
    });
    var app = new Vue({
        el:'#app'
    })
</script>

要传递多个参数的时候，只需要在props数组里添加参数即可。

<div id="app">
    <my-component message="来自父组件的数据" warnning-text="haha"></my-component>
    <my-component message="来自父组件的数据"></my-component>
    <my-component message="来自父组件的数据"></my-component>
</div>
<script>
    //全局注册
    Vue.component('my-component',{
        props:['message','warnningText'],
        template:'<div>{{warnningText}} {{message}}</div>'
    });
    var app = new Vue({
        el:'#app'
    });
</script>

由于HTML特性不区分大小写，当使用DOM模板时，驼峰命名（camelCase ）的 props 名称
要转为短横分隔命名（ kebab-case ）

传递的数据不一定是直接写死的，而是来自父级的动态数据，这时候可以使用v--bind指令来绑定动态数据props的值，当父组件的数据变化的时候，也会传递给子组件。

<div id="app">
    <input type="text" v-model="parentMsg"/>
    <my-component :message="parentMsg"></my-component>
</div>
<script>
    //全局注册
    Vue.component('my-component',{
        props:['message'],
        template:'<div>{{message}}</div>'
    });
    var app = new Vue({
        el:'#app',
        data:{
            parentMsg:''
        }
    });

vue组件——props的用法

猜你喜欢