Vue에서 상위-하위 구성요소를 사용하여 todolist 구성요소와 통신하는 방법-JS 튜토리얼-php.cn

Vue에서 상위-하위 구성요소를 사용하여 todolist 구성요소와 통신하는 방법

php中世界最好的语言

풀어 주다： 2018-05-28 14:48:51

원래의

2084명이 탐색했습니다.

이번에는 Vue에서 상위-하위 컴포넌트를 사용하여 todolist 컴포넌트와 통신하는 방법을 보여드리겠습니다. Vue에서 상위-하위 컴포넌트를 사용하여 todolist 컴포넌트와 통신할 때 주의사항은 무엇입니까? 사례를 살펴보겠습니다.

1. Todolist 기능 개발

<p id="root">
  <p>
   <input type="text" v-model="inputValue">
   <button @click="handleSubmit">提交</button>
  </p>
  <ul>
   <li v-for="(item, index ) of list" :key="index">{{item}} </li>
  </ul>
 </p>
 <script>
 new Vue({
  el:"#root",
  data:{
   inputValue:'',
   list:[]
  },
  methods:{
   handleSubmit:function(){
    this.list.push(this.inputValue);
    this.inputValue='';
   }
  }
 })
 </script>

로그인 후 복사

2. Todolist 구성 요소 분할

구성 요소 정의

1 , 전역 구성 요소 재귀 구성 요소의 경우 , "이름" 옵션을 제공해야 합니다.

 <p id="root">
  <p>
   <input type="text" v-model="inputValue">
   <button @click="handleSubmit">提交</button>
  </p>
  <ul>
   <todo-item></todo-item>
  </ul>
 </p>
 <script>
 Vue.component('todo-item',{
  template:'<li>item</li>'
 })
...

로그인 후 복사

3. Componentspass value

상위 구성 요소는 값을 속성 형식으로 하위 구성 요소에 전달합니다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="./vue.js"></script>
</head>
<body>
 <p id="root">
  <p>
   <input type="text" v-model="inputValue">
   <button @click="handleSubmit">提交</button>
  </p>
  <ul>
   <todo-item></todo-item>
  </ul>
 </p>
 <script>
 //全局组件
 // Vue.component('todo-item',{
 //  template:'<li>item</li>'
 // })
 var TodoItem={
  template:'<li>item</li>'
 }
 new Vue({
  el:"#root",
  components:{
   'todo-item':TodoItem
  },
  data:{
   inputValue:'',
   list:[]
  },
  methods:{
   handleSubmit:function(){
    this.list.push(this.inputValue);
    this.inputValue='';
   }
  }
 })
 </script>
</body>
</html>

로그인 후 복사

3. 컴포넌트와 인스턴스의 관계

new Vue() 인스턴스

Vue.comComponent는 컴포넌트입니다각 Vue 컴포넌트는 Vue의 인스턴스이기도 합니다. 모든 vue 프로젝트는 수천 개의 vue 인스턴스로 구성됩니다.

각 vue 인스턴스는 구성 요소이며, 각 구성 요소도 vue의 인스턴스입니다.

4. todolist

의

delete

기능을 구현합니다. 하위 구성 요소는 게시-구독 모드를 통해 상위 구성 요소에 알립니다.

<p id="root">
  <p>
   <input type="text" v-model="inputValue">
   <button @click="handleSubmit">提交</button>
  </p>
  <ul>
   <todo-item 
    v-for="(item ,index) of list"
    :key="index"
    :content="item"
   ></todo-item>
  </ul>
 </p>
 <script>
 Vue.component('todo-item',{
  props: ['content'], //接收从外部传递进来的content属性
  template:'<li>{{content}}</li>'
 })
 new Vue({
  el:"#root",
  data:{
   inputValue:'',
   list:[]
  },
  methods:{
   handleSubmit:function(){
    this.list.push(this.inputValue);
    this.inputValue='';
   }
  }
 })
 </script>

로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 도서: JS로 틱택토 게임을 만드는 방법

vue2.0을 사용하여 네비게이션 가드를 구현하는 방법

위 내용은 Vue에서 상위-하위 구성요소를 사용하여 todolist 구성요소와 통신하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!