Vue组件建立和组件传值
Vue建立组件的方式
使用Vue.Extend()和Vue.component全局注册组件
首先咱们定义一个组件并接收javascript
var com1 =Vue.extend({
template:"<h3>这是经过Vue.extend建立的组件</h3>"
});
而后咱们全局注册这个组件css
Vue.component('mycom1',com1);
这样咱们就能够在咱们的代码中使用咱们的mycom1组件了html
<div id="app">
<mycom1></mycom1>
</div>
须要注意的是，若是咱们注册的组件名称是以驼峰命名法来命名的，那么咱们在使用的时候将不能使用本来注册时的命名，以下的写法时错误的vue
//定义
Vue.component('myCom1',com1);
//使用
<div id="app">
<myCom1></myCom1>
</div>
咱们在使用的时候须要将驼峰命名法的两个单词使用‘-’进行分开，而且更加推荐‘-’左右两端的单词均使用小写，以下java
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<my-com1></my-com1>
</div>
<script>
var com1 =Vue.extend({
template:"<h3>这是经过Vue.extend建立的组件</h3>"
});
Vue.component('myCom1',com1);
var vm = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
同时咱们能够将构造和注册结合在一块儿bootstrap
Vue.component('myCom1',Vue.extend({
template:"<h3>这是经过Vue.extend建立的组件</h3>"
}));
更加简化的方式app
Vue.component('myCom1',{
template:"<h3>这是经过Vue.extend建立的组件</h3>"
});
须要注意的是，咱们无论使用哪一种方式来定义组件，template中定义的顶级元素只能有一个，不然会出现错误函数
使用Vue.component()配合Vue的templete标签来定义组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<my-com1></my-com1>
</div>
<template id="mycom2">
<h3>这是经过Templete定义的组件，在html代码中有智能提示</h3>
</template>
<script>
Vue.component('myCom1',{
template:"#mycom2"
});
var vm = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
须要注意的是，上述的定义方式都是定以的全局Vue对象都可使用，下面咱们定义一个私有的组件vue-resource
Vue.component私有组件
Vue对象内部有一个components组件，能够定义咱们想要的组件this
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<login></login>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
components:{
login:{
template:'<h3>这是私有的login组件</h3>'
}
}
})
</script>
</body>
</html>
同时仍然可使用上述的template方式来定义组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<login></login>
</div>
<template id="app2">
<h3>这是私有组件配合template方式定义的组件</h3>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
},
components:{
login:{
template:'#app2'
}
}
})
</script>
</body>
</html>
组件的data
定义的组件能够有本身的data数据域，可是data必须为一个function且必须返回一个对象格式的数据，除此以外和Vue对象中的data的使用方法彻底一致
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<login></login>
</div>
<template id="app2">
<h3>这是私有组件配合template方式定义的组件---{{msg}}</h3>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
},
components:{
login:{
template:'#app2',
data:function(){
return {
msg:"这是组件中的数据"
}
}
}
}
})
</script>
</body>
</html>
组件切换
使用v-if和v-else实现组件切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<a href="#" @click.prevent="flag=true">登陆</a>
<a href="#" @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<template id="app2">
<h3>这是登陆组件</h3>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:true
},
components:{
login:{
template:'#app2',
},
register:{
template:'<h3>注册组件</h3>',
}
}
})
</script>
</body>
</html>
不过使用这种方式只能实现两种类型的组件切换
使用component元素进行组件切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<a href="#" @click.prevent="comName='login'">登陆</a>
<a href="#" @click.prevent="comName='register'">注册</a>
<component :is="comName"></component>
</div>
<template id="app2">
<h3>这是登陆组件</h3>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
comName:'login'
},
components:{
login:{
template:'#app2',
},
register:{
template:'<h3>注册组件</h3>',
}
}
})
</script>
</body>
</html>
咱们使用定义在data中的属性来切换component中要展现的组件，使用:is来表明最后要展现的组件的值
父子组件传值
父组件向子组件传递数据
子组件默认没法直接访问到父组件（对象）中的数据，须要使用v-bind表达式来传递，结合组件的props属性来使用，便可达到父组件向子组件传递数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<login v-bind:parentmsg="msg"></login>
</div>
<template id="app2">
<h3>这是私有组件配合template方式定义的组件--{{parentmsg}}</h3>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:"这是父组件中的数据"
},
components:{
login:{
template:'#app2',
data(){
return {
name:'zhangsan',
age:'24'
}
},
props:['parentmsg']
}
}
})
</script>
</body>
</html>
须要注意的是，经过props传递过来的数据是不推荐被修改的，强行修改会报错
props中定义的属性所有都是由父组件传递给子组件的
而子组件data中的数据是组件私有，能够被修改的
子组件向父组件传递数据
子组件向父组件传值是经过父组件向子组件传递事件实现的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<login @func="show"></login>
</div>
<template id="app2">
<input type="button" value="子组件按钮" @click="myclick" />
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:"这是父组件中的数据"
},
methods:{
show(data){
console.log("这是父组件的事件"+data)
}
},
components:{
login:{
template:'#app2',
data(){
return {
name:'zhangsan',
age:'24'
}
},
props:['parentmsg'],
methods:{
myclick(){
this.$emit('func',this.name);
}
}
}
}
})
</script>
</body>
</html>
从如上代码可知，父组件调用子组件中的数据须要借助this.$emit来进行传递，传递的第一个参数都是函数名，后面的参数都是传递的数据，能够传递单个属性或者是对象
相关文章
- 1. Vue父组件和子组件传值
- 2. vue 组件传值
- 3. Vue组件传值
- 4. VUE组件传值
- 5. vue组件传值
- 6. Vue 组件 传值
- 7. vue中子组件往父组件传值，父组件往子组件传值
- 8. VUE 父组件向子组件传值
- 9. vue子组件给父组件传值
- 10. Vue子组件向父组件传值
- 更多相关文章...
- • ASP AdRotator 组件 - ASP 教程
- • ASP Content Linking 组件 - ASP 教程
- • 适用于PHP初学者的学习线路和建议
- • 互联网组织的未来：剖析GitHub员工的任性之源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Vue父组件和子组件传值
- 2. vue 组件传值
- 3. Vue组件传值
- 4. VUE组件传值
- 5. vue组件传值
- 6. Vue 组件 传值
- 7. vue中子组件往父组件传值，父组件往子组件传值
- 8. VUE 父组件向子组件传值
- 9. vue子组件给父组件传值
- 10. Vue子组件向父组件传值