vue全局组件,局部组件及父子组件间简单的传值方式

父传子
在子组件上绑定父组件的数据 :content=“item”
子传父
在子组件上绑定自定义事件 @delete=“handleDelete”

<div id="app">
    <input type="text" v-model.trim="inputValue">
    <button v-on:click="addClick">提交</button>
    <ul>
      <!-- 不使用组件 -->
      <!-- <li v-for="item in list">{
   {item}}</li> -->
	  <!-- todo-item 子组件 -->
      <todo-item :content="item" v-for="(item,index) in list" :key="index" @delete="handleDelete">
      </todo-item>
    </ul>
  </div>

子组件中用props接收父组件的 content 值
子组件中用$emit传递自定义事件和参数

全局组件

/*   // vue 的component方法是vue提过创建全局组件的方法
    // 子组件 TodoItem
    Vue.component('TodoItem', {
      // 父传子
      props: ['content'],
      template: '<li>{
   {content}}</li>'
    }) */

局部组件

  // 局部组件
  var TodoItem = {
   
    // 父传子