Vue组件使用
一.Vue组件之定义注册使用
1.定义 2.注册 3.使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <!--组件使用步骤--> <!--1.定义组件--> <!--2.注册组件--> <!--3.使用组件--> <div id="app1"> <!--3.使用组件--> <son_zujian></son_zujian> </div> <script> // 1.定义组件 var child = {template:'<div>我是app1中定义的局部组件</div>'} // 创建的 Vue 根实例 new Vue( { el:'#app1', data:{ messsage:123 }, //2.注册组件，定义多个component加s components:{ 'son_zujian':child } } ) </script> </body> </html>
运行结果
二.vue组件之全局与局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<!--组件使用步骤-->
<!--1.定义组件-->
<!--2.注册组件-->
<!--3.使用组件-->
<div id="app1">
<!--3.使用组件-->
<quanju ></quanju>
<son_zujian></son_zujian>
</div>
<div id="app2">
<!--3.使用组件-->
<quanju ></quanju>
<son2_zujian></son2_zujian>
</div>
<script>
// 1.定义组件
var child = {template:'<div>我是app1中定义的局部组件</div>'}
// 注册全局组件,定义一个component不加s
Vue.component('quanju', {
template: '<div>我是全局组件</div>',
}
);
// 创建的 Vue 根实例
new Vue(
{
el:'#app1',
data:{
messsage:123
},
//2.注册局部组件，定义多个component加s
components:{
'son_zujian':child
}
}
)
new Vue({
el:'#app2',
components:{'son2_zujian':{template:'<div>我是app2中定义的局部组件</div>'}}
})
</script>
</body>
</html>
运行结果
三.父组件传值给子组件
方式一
方式一
Vue.component('quanju',{template:'<div>我是全局组件 {{message}}</div>', data:function () { return {message:456}
}}）
方式二，父组件通过props传给子组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <!--组件使用步骤--> <!--1.定义组件--> <!--2.注册组件--> <!--3.使用组件--> <div id="app1"> <!--3.使用组件--> <quanju message="我是父组件"></quanju> <son_zujian></son_zujian> </div> <div id="app2"> <!--3.使用组件--> <quanju message="我也是父组件"></quanju> <son2_zujian></son2_zujian> </div> <script> // 1.定义组件 var child = {template:'<div>我是app1中定义的局部组件</div>'} // 注册全局组件,定义一个component不加s Vue.component('quanju',{template:'<div>我是全局组件 {{message}}</div>', // 使用props，父件传值给子件 props:['message'] } ); // 创建的 Vue 根实例 new Vue( { el:'#app1', data:{ messsage:123 }, //2.注册局部组件，定义多个component加s components:{ 'son_zujian':child } } ) new Vue({ el:'#app2', components:{'son2_zujian':{template:'<div>我是app2中定义的局部组件</div>'}} }) </script> </body> </html>
方式二运行结果
四.使用v-bind固定使用数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <!--组件使用步骤--> <!--1.定义组件--> <!--2.注册组件--> <!--3.使用组件--> <div id="app1"> <!--3.使用组件--> <quanju v-bind:message="message"></quanju> <son_zujian></son_zujian> </div> <div id="app2"> <!--3.使用组件--> <quanju ></quanju> <son2_zujian></son2_zujian> </div> <script> // 1.定义组件 var child = {template:'<div>我是app1中定义的局部组件</div>'} // 注册全局组件,定义一个component不加s Vue.component('quanju',{template:'<div>我是全局组件 {{message}}</div>', // 使用props，父件传值给子件 props:['message'] } ); // 创建的 Vue 根实例 new Vue( { el:'#app1', data:{ message:123 }, //2.注册局部组件，定义多个component加s components:{ 'son_zujian':child } } ) new Vue({ el:'#app2', components:{'son2_zujian':{template:'<div>我是app2中定义的局部组件</div>'}} }) </script> </body> </html>
运行结果
五.v-model双向绑定数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<!--组件使用步骤-->
<!--1.定义组件-->
<!--2.注册组件-->
<!--3.使用组件-->
<div id="app1">
<!--3.使用组件-->
<input type="text" v-model='message'>
<quanju :message="message"></quanju>
<son_zujian ></son_zujian>
</div>
<div id="app2">
<!--3.使用组件-->
<quanju ></quanju>
<son2_zujian></son2_zujian>
</div>
<script>
// 1.定义组件
var child = {template:'<div>我是app1中定义的局部组件</div>'}
// 注册全局组件,定义一个component不加s
Vue.component('quanju',{template:'<div>我是全局组件 {{message}}</div>',
// 使用props，父件传值给子件
props:['message']
}
);
// 创建的 Vue 根实例
new Vue(
{
el:'#app1',
data:{
message:123
},
//2.注册局部组件，定义多个component加s
components:{
'son_zujian':child
}
}
)
new Vue({
el:'#app2',
components:{'son2_zujian':{template:'<div>我是app2中定义的局部组件</div>'}}
})
</script>
</body>
</html>
运行结果
六.父组件与子组件生命周期
子周期在父周期前完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<fa></fa>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let child = {
template: '<div>自定义组件</div>',
beforeCreate() {
console.log('子组件的beforeCreate')
},
Created() {
console.log('子组件的Created')
},
beforeMount() {
console.log('子组件的beforeMount')
},
mounted() {
console.log('子组件的mountede')
}
}
var app = new Vue({
el: '#app',
beforeCreate(){
console.log('父组件的beforeCreate')
},
Created(){
console.log('父组件的Created')
},
beforeMount(){
console.log('父组件的beforeMount')
},
mounted(){
console.log('父组件的mountede')
},
components:{'fa': child},
})
</script>
</body>
</html>
运行结果
浙公网安备 33010602011771号