小编Qar*_*Qar的帖子

在第2节 - 重用vue方法的正确做法是什么？

不是在每个组件中编写它们,而是将它们全局化的最佳方法是什么？

我正在基于数组渲染一些复选框，并使用data属性作为v模型。我正在使用Vue2。

但是，由于v-model的值等于1（我想将其视为布尔值而不是数字）时，由于某种原因，我最终选中了所有复选框。

我尝试了v-model.number-没有任何运气。我究竟做错了什么？

我的模板：

<div v-for="category in categories">    
    <input type="checkbox" v-model.number="item.category" :id="'category_' + category.id" :value="category.id" @change="save"/>
    <label>{{ item.category }} : {{ category.id }}</label>
</div>

模型数据（item.category）：

1

分类：

[
  {
    "id": 2,
    "name": "news Category 0"
  },
  {
    "id": 7,
    "name": "news Category 1"
  },
  {
    "id": 12,
    "name": "news Category 2"
  },
  {
    "id": 17,
    "name": "news Category 3"
  },
  {
    "id": 22,
    "name": "news Category 4"
  },
  {
    "id": 27,
    "name": "news Category 5"
  },
// other …

如果你有一个通过 Node 安装的 vue 组件：

node_modules/vendor/somecomponent.vue

有没有办法修改/扩展这个组件的模板/方法？

更新：

在尝试了下面的示例后，我面临这个问题：

我正在使用https://github.com/eliep/vue-avatar并且我需要用一个道具来扩展它，并且可能稍微修改一下模板。

import {Avatar} from 'vue-avatar'

Avatar = Vue.component('Avatar').extend({
      props: ['nationality']
});

export default {
        components: {
            Avatar
        }, 

       ...
}

结果是 TypeError: Cannot read property 'extend' of undefined

我有一个简单的产品，默认价格值为 100。

当你选择产品时，它必须直接去结帐，我的处理方式如下：

/checkout/?add-to-cart=78

但是，必须可以覆盖该产品的价格，因为它是志愿者的捐赠金额。

我正在尝试这个：

/checkout/?add-to-cart=78&donation=200

在我的functions.php 中我有：

add_action( 'woocommerce_before_calculate_totals', 'add_custom_price', 10, 1);
function add_custom_price( $cart ) {

    if ( is_admin() && ! defined( 'DOING_AJAX' ) )
        return;

    // Avoiding hook repetition (when using price calculations for example)
    if ( did_action( 'woocommerce_before_calculate_totals' ) >= 2 )
        return;



    foreach ( $cart->get_cart() as $cart ) {
        $id = $cart['data']->get_id();

        if ($id === 78 && $_GET['donation']) {
            $price = $_GET['donation'];
        }
        else {
            $price = $cart['data']->get_price();
        }

        $cart['data']->set_price( $price );

    }   
} …

关于将数据从根实例传递到组件的正确方法,我有点困惑.

假设我有这个根实例:

const app = new Vue({
    el: '#app',

    data: {
        foo: 'bar'
    },
});

然后我在一个单独的.vue文件中有一个组件:

<template>
    <div>I'm a component!</div>
</template>

<script>
    export default {
        methods: {
            fooTest: function() {   
                console.log(this.$root.$data.foo);
            },
        },

        mounted() {
           this.fooTest();
        }
    }
</script>

这很好用.fooTest将从根实例数据中获得"bar".

但这是正确的方法吗？或者最佳做法是什么？