Vue组件简单传值

父组件传值到子组件

通过 props 进行父组件向组件传值。

• 首先，在子组件中绑定参数，参数名字自拟。

<子组件名称 :content="参数值"></子组件名称>

• 然后在子组件中用 props 属性接收参数。

 props: ["content"]

• 最后就在页面中调用参数

<div>{{content}}</div>

例如下面这个例子

<!--html-->
<div id="app">
  <input type="search" v-model="value" />
  <button @click="addList">提交</button>

  <ul>
    <!-- <li v-for="(item,index) in list" :key="index">{{ item }}</li> -->
    <todo-item v-for="(item,index) in list" :key="index" :content="item"></todo-item>
  </ul>
</div>

//组件模板
var todoItem = {
    props: ["content"],
    template: "<li> {{content}} </li>"
};

、、实例化对象
var app = new Vue({
    el: "#app",
    data() {
      return {
        value: "",
        list: []
      };
    },
    methods: {
      addList() {
        this.list.push(this.value);
        this.value = "";
      }
    },
    components: {
      todoItem
    }
});

子组件传值给父组件

上一个例子是点击提交，生成一条列表。现在我们需要点击当前某一条列表，删除列表。

我们还是参考上一个例子来完成这个效果。其中就需要用到子组件传值给父组件。

• 我们先给子组件绑定事件

template: "<li @click='handleItems'> {{content}} </li>",

• 然后在子组件的中的 methods编写事件

子组件可以使用 $emit 触发父组件的自定义事件

methods:{
  handleItems() {
    this.$emit('delete');
  }
}

• 在父组件中进行绑定事件

<todo-item v-for="(item,index) in list" :key="index" :content="item" @delete="handleItemsDelete"></todo-item>

• 然后在父组件中 methods 编写事件方法

//清空列表
methods: {
   handleItemsDelete(index){
    this.list = [];
  }
}

这样可以实现点击列表，可以清空列表。但是这不是我们想要的效果。我们需要点击哪一条列表，哪一条列表就消失，而不是全部消失。

做到这样的效果，我们需要知道列表的下标才好去操作某一条数据。

• 再回到刚刚父组件传值给子组件的那个，我们还需要多穿一个下标值给子组件。

<todo-item v-for="(item,index) in list" :key="index" :content="item" :index="index" @delete="handleItemsDelete"></todo-item>

我们多绑定一个 index属性，做为传下标给子组件的参数。

• 子组件接收值，并把值再传回给父组件

props: ["content","index"],
methods:{
  handleItems(){
    this.$emit('delete',this.index);
  }
}

• 父组件在编写事件时，把值传入handleItemsDelete方法，并进行删减操作。

methods: {
    handleItemsDelete(index){
    this.list.splice(index,1);
  }
}

全部代码如下

<div id="app">
  <input type="search" v-model="value" />
  <button @click="addList">提交</button>

  <ul>
    <todo-item v-for="(item,index) in list" :key="index" :content="item" :index="index" @delete="handleItemsDelete"></todo-item>
  </ul>
</div>

 var todoItem = {
    props: ["content","index"],
    template: "<li @click='handleItems'> {{content}} </li>",
    methods:{
      handleItems(){
        this.$emit('delete',this.index);
      }
    }
  };
  var app = new Vue({
    el: "#app",
    data() {
      return {
        value: "",
        list: []
      };
    },
    methods: {
      addList() {
        this.list.push(this.value);
        this.value = "";
      },
      handleItemsDelete(index){
        this.list.splice(index,1);
      }
    },
    components: {
      todoItem
    }
  });

👨‍👦父子组件之间的传值需要注意的事项

Vue提倡的是单向数据流，即父组件可以传值给子组件，但是子组件不能去直接修改父组件传过来的值。