Question

我正在尝试通过on：click $ event将道具孩子更新为父母。

我将数据和$ event传递给父级到子级，如下所示。 在父母中；

<v-filter
    :sortTypePrice="sortTypePrice"
    :sortTypeNewest="sortTypeNewest"
    v-on:updatePrice="sortTypePrice = $event"
    v-on:updateDate="sortTypeNewest = $event"
/>


data(){
    return {
        sortTypePrice: "",
        sortTypeNewest: "",
    }
 }

computed: {
  filterArticles(){

      let filteredStates = this.api.filter((article) => {
          return (this.keyword.length === 0 || article.address.includes(this.keyword)) 
      });

      if(this.sortTypePrice == "price") {
          filteredStates = filteredStates.sort((prev, curr) => prev.price1 - curr.price1);
      }
      if(this.sortTypeNewest == 'created_at') {
          filteredStates = filteredStates.sort((prev, curr) => Date.parse(curr.created_at) - Date.parse(prev.created_at));
      }

      return filteredStates;
  },
}

我得到了道具并设置了$ event更新。但是我的@click无法正常工作。

在儿童中

<ul>
  <li v-model="sortPrice" @click="updatePrice" :value="price">lowest</li>
  <li v-model="sortDate" @click="updateDate" :value="created_at">newest</li>
</ul>


props:["sortTypePrice", "sortTypeNewest"],
name: "controller",
data(){
    return {
        price: "price",
        created_at: "created_at",
        sortPrice:this.sortTypePrice,
        sortDate:this.sortTypeNewest,
    };
},
methods: {
    updatePrice(e){
        this.$emit("updatePrice", e.target.value)
    },
    updateDate(e){
        this.$emit("updateDate", e.target.value)
    }
}

我认为，我使用的是非常错误的方式。如果是这样，实现此目标的正确方法是什么？

Answer 1

您不应同时设置:value和v-model。你可以尝试

<ul>
  <li @click="$emit('updatePrice', 'price')" :value="price">lowest</li>
  <li @click="$emit('updateDate', 'created_at')" :value="created_at">newest</li>
</ul>

Answer 2

我发现以下是在父级和子级组件之间同步道具的最佳方法：

在父母中：

<!-- notice `sync` modifier -->
<child :foo.sync="val" />

在孩子中：

<input v-model="foo_" />

props: ['foo'],
computed: {

    // create a local proxy for the `foo` prop
    foo_{
        // its value should be the value of the prop
        get(){
            return this.foo
        },

        // when we try to change it we should update the prop instead
        set(val){
            this.$emit('update:foo', val)
        }
    }
}

现在在子组件中，您可以像使用foo_道具一样使用foo道具。每当您尝试更改它时，它都会更新父级中的foo属性，然后向下同步，以使foo_等于foo。例如，this.foo_ = 1会变成foo == 1。

这与v-model指令所应用的模式相同。检查.sync Modifier以获得更好的理解。

将值设置为<li>标记并更新以下属性：单击$ event vue.js

2 个答案: