前端框架vue.js的组件注册基础

最新推荐文章于 2023-06-07 13:33:24 发布

fffqqwhy

最新推荐文章于 2023-06-07 13:33:24 发布

阅读量265

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43165064/article/details/106843892

版权

vue 组件注册

var MyComponent = Vue.extend({});

此时得到一个组件构造器，但还无法直接使用，需要将组件注册到应用中。注册方式分为全局注册和局部注册

1 全局注册

需要注意全局注册在根实例初始化之前注册
方式如下：

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

这条语句要在var vm= new Vue({ })之前，注册成功之后就可以以<my-component> 的形式使用组件。
命名规范建议使用小写字母加“-”。

<div id="app">
<my-conponent></my-conponent>
</div>
var MyComponent = Vue.extend({
    template:'<p>this is a component</p>'
})
Vue.component('my-component',MyComponent)
var vm = new Vue({
    el:'#app'
})

结果如下：

<div id="app">
    <p>this is a component</p>
</div>

2 局部注册

局部注册的组件只能在被注册的组件中使用，无法在其他组件中使用。

var child = Vue.extend({
template:'<p>this is child component</p>'
});
var Parent = Vue.extend({
template:'<div>\
	<p>this is a parent component</p>\
	<my-child></my-child>\
	</div>',
	components:{
	'my-child':child
	}
});

输出结果：

<div>
<p>this is a parent chmponent</p>
<p>this is child component</p>
</div>

3注册语法糖

vue提供了全局注册和局部注册的简化方法，可以在注册时定义组件构造器选项。

//全局注册
Vue.component('my-component',{
	template:'<p>this is a parent chmponent</p>'
})
//局部注册
var parent = Vue.extend({
template:'<div>\
	<p>this is a parent component</p>\
	<my-child></my-child>\
	</div>',
	components:{
	'my-child':{
		template:'<p>this is child component</p>'
	}
	}
});

组件选项中的data赋值与构造器选项中的data赋值略有不同，在vue构造器中是对data直接赋值，而在组件中data需要通过return返回值，这是因为组件可能有多个实例，如果直接赋值，那么一个实例的值改变，所有实例的值都将改变。

组件props

props起到父子组件间桥梁的作用。通过props将父组件的数据传递给子组件，子组件需要显式声明props。

vue.component('child',{
    props:['parent'],
    template:'<p>{{parent}}is from parent</p>'
})
<child parent = 'this data '></child>

结果为：

<p>this data is from parent</p>

动态传递数据
通过v-bind的方式将父组件的data数据传递给子组件。

var MyComponent = Vue.extend({
    props:['message'],
    template:"<p>{{'from parent :'+message}}</p>"
})
Vue.component("my-component",MyComponent);
var vm = new Vue({
    el:'app',
    data:{
        message:'default'
    }
})

绑定操作为：

<div id="app">
    <input type="text" v-model = 'message'>
    <my-component v-bind:message='message'></my-component>
   // <my-component :message='message'></my-component>  简写
</div>

这种动态传递传递的是字符串，需要借助动态props传递数值。


<my-num :num='num'></my-num>

Vue.component('my-num',{
    props:['num'],
    template:'<p>{{num +'is a'+typeof num}}</p>'
});
var vm  = new Vue({
    el:'#app',
    data:{
        num:1 //通过props传递data的值。
    }
})

默认是单向绑定，即父组件的数值改变，子组件的值也改变，反之则不然。
v-bind可以使用几种修饰符来选择不同的绑定方式：

v-bind:msg.sync	双向绑定
v-bind:msg.once	单次绑定

当props传递的是对象或数组时，子组件的改变将会影响到父组件，不论是何种绑定方式，因为vue是引用传递。

补个代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vscodeone.js"></script>
</head>
<body>
    <div id="one">
        <input type="checkbox" name="" id="jfjf" value="jfjf" v-model="checknames">
        <label for="jfjf">jfjf</label>
        <input type="checkbox" name="" id="jfjfzz" value="jfjfzz" v-model="checknames">
        <label for="jfjfzz">jfjfzz</label>
        <input type="checkbox" name="" id="jfjfxx" value="jfjfxx" v-model="checknames">
        <label for="jfjfxx">jfjfxx</label>
        <br>
        <span>the checknaems is : {{checknames}}</span>
        <!-- <span>{{name}}</span> -->
        <component-one></component-one>
        <component-one></component-one>
        <onescomponent></onescomponent>
        <onescomponent></onescomponent><onescomponent></onescomponent><onescomponent></onescomponent>
    </div>
    
</body>
<script src="./vue.js"></script>
<script>
// 全局组件，使用Vue.component（name，{}）格式，任意新的vue实例都可以使用，
Vue.component('component-one', {
    data: function() {
        return {
            count: 0
        }
    },
    template: '<button v-on:click= "count++">you checked {{count}} times.</button>'
    })

// 组件要在使用它的实例前注册，有先后顺序。
var childcomponent = {
    template : '<div>helll，这是一个id为one的div的子组件</div>'
}
new Vue({
        el: "#one",
        data: {
            checknames: [],
            name: 'heloo'
        },  
        // 局部组件，使用components：{}格式，只有当前实例可以使用，即定义这个组件的实例。 
        components:
        {
            // 'onescomponent':childcomponent
            onescomponent:{template: '<div>hello，这是一个id为one的div的子组件</div>'}
        }
        
    })  

</script>
</html>

fffqqwhy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端框架vue.js的组件注册基础

vue 组件注册var MyComponent = Vue.extend({});此时得到一个组件构造器，但还无法直接使用，需要将组件注册到应用中。注册方式分为全局注册和局部注册1 全局注册需要注意全局注册在根实例初始化之前注册方式如下：Vue.component('my-component',MyConponent);这条语句要在var vm= new Vue({ })之前，注册成功之后就可以以<my-component> 的形式使用组件。命名规范建议使用小写字母加“-”。
复制链接

扫一扫