微信小程序--自定义组件 + 小程序和Vue的父子组件数据传递

一.  创建和使用组件

　　1.  自己定义组件（组件也是包含: js，json，wxml，wxss的页面文件）

　　2.  在需要使用该组件的页面中，添加组件信息

 

创建组件

　　1.  在根目录，创建components文件夹，用来存放组件的子文件夹。

　　2.  可以在components中创建子文件夹，用来作为自定义组件，子文件夹中包含：js,  wxml,  json,  wxss

声明组件

　　1.  在需要使用自定义组件的页面. json文件中，在usingComponents对象中增加组件声明　　　

{
    "usingComponents": {
            "Tabs": "../../components/Tabs/Tabs"
    }
}

在其它页面中使用组件

在.html中使用该组件的标签

<Tabs>...</Tabs>

 

 

二.  父组件向子组件传传递数据：通过 属性 来传递

　　1. 微信小程序中 父组件向子组件传递数据

　　　　1.  父组件中，.html 中使用子组件标签：<标签名>...</标签名>； 使用标签属性绑定数据： <标签名  属性名='{{变量名}}'></标签名>

　　　　2.  子组件中，.js 文件中Components对象里的属性：properties，用来获取父组件传递来的数据

　　　　　　properties:{

　　　　　　　　属性名：{

　　　　　　　　　　type：String  /  Array / ...　　# 数据类型

　　　　　　　　　　value：‘ ’/  【 】 /  ...  　　# 默认值

　　　　　　　　}

　　　　　　}

　　2. Vue中 父组件向子组件传递数据

　　　　1.  类似于小程序中的用法,区别:  <标签名  v-bind:属性名='变量名'></标签名>      原因:  vue中想要在标签属性中使用变量,不能使用mustache语法,只能使用v-bind绑定

　　　　　2. 子组件接收数据类似于小程序,区别:

　　　　　　props:{

　　　　　　　　属性名: {

　　　　　　　　...

　　　　　　　　}

　　　　　　　　或

　　　　　　　　属性名:  Array   (数据类型)

　　　　　　}

　　

三.  子组件向父组件传递数据： 通过 绑定事件  来传递

　　1. 微信小程序中,  子组件向父组件发送事件,传递数据

　　　　1.  子组件.js中，在某个子组件事件中，通过 this.triggerEvent('自定义事件名',  数据) 绑定一个  事件名 和 数据

　　　　事件名1(){

　　　　　　this.triggerEvent('自定义事件名2',  数据)

　　　　}

　　　　2.  父组件.html中， 使用组件标签来接收绑定的事件和数据，<标签名  bind事件名=“父组件内定义一个事件”>...</标签名>，数据可以在父组件中定义的事件中，通过参数 e 来提取

 　　2. Vue中, 子组件向父组件发送事件,传递数据

　　　　1. 子组件中, 逻辑与小程序相同, 区别: 使用this.$emit('自定义事件名', 数据)

　　　　methods:{

　　　　　　子组件事件名(){

　　　　　　　　this.$emit('自定义事件名', 数据)

　　　　　　}

　　　　}

　　　　2.父组件,  区别: <标签名  v-on: 自定义事件名=“父组件内定义一个方法”>...</标签名>

　　　　注意:此时,父组件中定义的方法,可以不使用()来接收参数,且因不属于内部事件,不会默认传递event到事件中, 而是会将发射时的数据传递到事件中

　　　　methods:{

　　　　　　父组件内定义一个方法名(数据参数){

　　　　　　　　console.log(数据)　　　　　　　

　　　　　　}

　　　　}

　　

四.  slot插槽

　　相当于占位符，父组件传递什么内容，就显示什么内容

　　微信小程序插槽：

　　　　暂无

　　Vue的插槽：

　　　　一般插槽： <slot></slot>

　　　　具名插槽： <slot  name='自定义名称'></slot>

　　　　作用域插槽：<slot  : 自定义属性名=“变量”></slot>

　　Vue中，通过作用域插槽，也可以将子组件的数据，绑定到一个自定义的属性中，传递给父组件使用。

　　使用：

　　　　在父组件中，通过声明：slot-scpoe="slot"后， 就可以通过slot.插槽中的自定义的属性名  来使用数据：

　　　　　　<子组件标签名>

　　　　　　　　<template  slot-scpoe="slot">

　　　　　　　　　　<希望插入插槽的标签>slot.插槽中的自定义的属性名</希望插入插槽的标签>

　　　　　　　　</template>

　　　　　　</子组件标签名>

 

补：ref 注册引用信息：  可以通过ref获取到组件的实例

# 被用来给元素或子组件注册引用信息（ID的替代者）
# 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
用法：
    1. 打标识：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
    2. 获取：```this.$refs.xxx```

//父组件中通过ref获取子组件的实例，此处获取的子组件HelloWorld
<template>
  <div class="home">
    <h1>我是父组件<button @click="change">点我查看被ref标记的组件</button></h1>
    <HelloWorld ref="HelloWorld" />
  </div>
</template>
 
<script>
import HelloWorld from "@/components/HelloWorld.vue";
 
export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  methods: {
    change() {
      console.log(this.$refs.HelloWorld);
    },
  },
};
</script>

chang()中打印调用子组件HellWorld的实例： this.$refs.HellWorld

结果：

 

 

拿到组件实例我们可以直接更改组件的数据，以及触发组件的方法

  methods: {
    change() {
      this.$refs.HelloWorld.num+=1,
      this.$refs.HelloWorld.Subcomponents()
    },