Question

是否可以将v-model值传递给另一个组件？我的HTML代码如下所示

vue.js代码如下所示

body{
  font-size: 0;
}

div{
  display: inline-block;
  width: 50%;
}

.filter{
  filter: invert(0.85);
}

.filter img{
  filter: invert(1);
}

我可以使用下面的代码在同一个组件中使用此v模型值。

<div class="initial">
  <img src="https://s7d1.scene7.com/is/image/PETCO/cat-category-090617-369w-269h-hero-cutout-d?fmt=png-alpha" alt="">
</div>
<div class="filter">
  <img src="https://s7d1.scene7.com/is/image/PETCO/cat-category-090617-369w-269h-hero-cutout-d?fmt=png-alpha" alt="">
</div>

但是如何在另一个组件中使用v-model值？

Answer 1

每次勾选其中一个复选框时，您可以使用v-model值发出事件：

import matplotlib.pyplot as plt
import matplotlib.image as mpimg
import binascii

with open('rgb.txt', 'rb') as f:
    hexdata = binascii.hexlify(f.read())

hexdata = hexdata.decode()
n = 2
hexlist = [hexdata[i:i+n] for i in range(0, len(hexdata), n)]

height = 720
width = 1280
depth = 3
array = np.zeros((height,width,depth), dtype=float)

counter = 0
for y in range(0,height):
    for x in range(0,width):
        for z in range(0,depth):
            array[y][x][z] = float(int(hexlist[counter], 16))
            counter = counter + 1



test_image = image.array_to_img(array)
imgplot = plt.imshow(test_image)

在另一个组件中监听事件：

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" @change="onChange">
<label for="mike">Mike</label>

methods: {
   onChange () {
       this.$root.$emit('checkbox.changed', this.checkedNames)
    }
}

在组件的上下文中，您应该始终将// my-component.js created () { this.$root.$on('checkbox-changed', payload => { // do something with payload... } }属性声明为函数。

data

您的其他选择是使用州管理策略，即 Vuex或类似的。

传递v模型值

1 个答案: