组件的定义，使用以及简单传值
组件：定义的组件是页面的一部分，组件具有共用行，复用性，组件内部的data数据是被当前调用组件独立使用的，不影响其他使用
全局组件：只要定义了，处处可以使用，性能不高，但使用起来简单
局部组件：定义了，只有注册才能使用，性能高，使用起来复杂
组件传值：父组件–》子组件
子组件通过props接受父组件传递来的值，子组件可以接受父组件传递来的String，Boolen,Number,Array,Object,Function这些数据类型
单项数据流概念：子组件可以使用父组件传递来的数据，但是绝对不能修改传递来的数据；子组件可以在data中添加一个属性值来接收父组件传递来的值，这样就可以修改值了，这里修改的是子组件自己的data值：如 newcount: this.count
如果子组件没有props接受父组件传递来的值，即Non-prop属性；那么父组件传递来的值就会成为子组件标签上的属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
//局部组件
const localComponent = {
data() {
return {
val: "局部组件"
}
},
props: ['message2', 'params'],
template: `
<div>{{val}}：{{message2}}{{params.a}}</div>
`
}
var app = Vue.createApp({
data() {
return {
msg: "组件传值-我是一个全局组件",
msg2: "组件传值-我是一个局部组件",
eventFun: () => {
console.log("我是父组件传递来的函数")
},
params: {
a: '1',
b: '2',
c: '3'
},
oldcount: 1
}
},
components: {
localComponent
},
template: `
<div>
<global-component v-bind:message="msg" v-bind:event="eventFun" v-bind:count="oldcount" />
<local-component v-bind:message2="msg2" v-bind:params="params" />
</div>
`
});
//全局组件
app.component("globalComponent", {
data() {
return {
val: "全局组件",
newcount: this.count
}
},
props: {
message: {
type: String, //传递参数类型，String类型
default: "默认值"
},
event: Function, //传递参数类型，function类型
count: Number
},
methods: {
handleClick() {
console.log("触发父组件传递来的函数");
this.event(); //父组件传递来的函数
this.newcount += 1; //每次点击加1
}
},
template: `<div v-on:click="handleClick">{{val}}：{{message}}{{newcount}}</div>`
});
var vm = app.mount("#root");
</script>
</html>
子组件通过事件向父组件传值：
1.在子组件上添加自定义事件触发父组件methods中的方法，获取子组件传递来的值；
2.在子组件methods中添加方法，通过this.$emit(“父组件中自定义事件”，参数，…)触发父组件中的方法并传递参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
count: 1
}
},
methods: {
handleComponent(params, params2) {
console.log(params)
this.count += params2;
}
},
template: `
<div>
<component-sendvalue v-bind:count="count" v-on:fatherComponent="handleComponent" />
</div>
`
});
app.component("componentSendvalue", {
props: ['count'],
methods: {
childComponent() {
this.$emit("fatherComponent", "我是子组件，向你问好", 2);
}
},
template: `
<div v-on:click="childComponent">
我是子组件，我想向父组件传值:{{count}}
</div>
`
});
const vm = app.mount("#root");
</script>
</html>
子组件也可以通过v-model进行数据之间的双向绑定：
const app = Vue.createApp({
data() {
return {
count: 1,
count2: 1
}
},
template: `
<child-component v-model:count="count" v-model:count2="count2" />
`
});
app.component("childComponent", {
props: ["count", "count2"],
methods: {
handelClick() {
this.$emit("update:count", this.count + 4)
}
},
template: `
<div v-on:click="handelClick">我是子组件：{{count}}:{{count2}}</div>
`
})
const vm = app.mount("#root");
父组件向孙子组件传值，即多层组件传值：
通过在父组件中添加一个provide方法，并把要传递的值写入进去；
在孙子组件或者在下级组件中通过添加inject数组获取要传递的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
count: 2
}
},
// provide: {
// count: 1
// },
provide() {
return {
count: this.count
}
},
template: `
<child-componet />
`
});
app.component("child-componet", {
template: `<div>
我是孩子组件：我要引入我的孩子组件
<grandson-componet />
</div>`
})
app.component("grandson-componet", {
inject: ['count'],
template: `<div>我是孙子组件:{{count}}</div>`
})
const vm = app.mount("#root");
//页面输出：
// 我是孩子组件：我要引入我的孩子组件
//我是孙子组件:2
</script>
</html>
955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
