Vue中的组件,其实和我们js中的函数是一个逻辑,只是更加抽象化了
可以把组件理解成函数,如果想更贴近一些,理解成类(有属性和方法,还能构造出实例)
组件相当于类,构造出的实例,相当于类实例,面向对象的封装思维!
//父子关系的组件类似于这种结构!
//...function... 这里是全局作用域,相当于new Vue()组件
//有一点很重要:在组件中,不能跨作用域访问参数,必须一级一级往下传递,有发送者,也必须有接受者!
function parent() {
//这里的作用域是parent的;
function son() {
//这里的作用域是son的;
}
}
组件之间传递参数分为两种方式,一种是在html标签方式传递! 针对对父子组件!另外一种是,直接用vm.$on函数在js内部传递!
第一种:父子组件传递方法!
template 代码如下:
<head>
<link rel="stylesheet" href="./src/css/bootstrap.css">
<link rel="stylesheet" href="./src/css/app.css">
<!-- 模板代码务必单独提出来,不能放在.container中,否则会报错,因为此作用域中的变量,在.container中没有! -->
<template id="parent">
<div>
<p><span>这是一个父组件{{parent_value}} </span></p>
<!--
父子组件传递参数的注意事项:
A、my-son是parent的子组件,必须放在内部才会显示!
B、在parent组件的内部调用son组件标签,必须在在my-son标签中传递参数【v-bind:son_value】;
C、必须在在my-son标签中返回数据【@son_data】,千万别放在其他标签上了,否则无效!
-->
<my-son v-bind:son_value="parent_value" @son_data="click_parent(event)" ></my-son>
<hr >
</div>
</template>
<template id="son">
<ol>
<li>这是一个子组件{{son_value}}</li>
<p><button @click='click_son(event)'>son按钮触发</button></p>
</ol>
</template>
</head>
<body>
<!--这里的container内部不能嵌入template(有局部作用域变量的),否则会报错!!-->
<div class="container" >
<my-parent v-bind:parent_value="g_data" @parent_data ="show(event)"></my-parent>
</div>
</body>
js代码如下:
const app = new Vue({
el:".container",
data:{
g_data:"new Vue对象的作用域!"
},
methods: {
},
components:{
"my-parent":{
template: "#parent",
//在自定义组件中,data必须是函数,最终返回一个对象(官方有说明)
data:function(){
return {
parent_data:"这是一个局部父组件模板",
}
},
props:["parent_value"],
methods:{
click_parent:function(...args) {
console.log(args);
console.log("接受成功");
},
},
components:{
"my-son":{
template:"#son",
data:function() {
return {
son_name:"发射成功",
}
},
props:["son_value"],
methods: {
click_son:function(event) {
console.log("son的按钮已经点击成功,等待接受数据.....");
//this.$emit发射函数事件名称"son_data"不能有大写字母,否则发射会失败!
//详情查看:https://blog.csdn.net/weixin_43343144/article/details/86229116
this.$emit("son_data",[this.son_value,this.son_name]);
},
}
}
}
},
}
});