Vue-组件props属性再回顾

最新推荐文章于 2024-05-14 21:08:14 发布

letMeAlone_

最新推荐文章于 2024-05-14 21:08:14 发布

阅读量1.8k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/a250758092/article/details/60614209

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

组件有自己独立的作用域！如果需要传递参数进入组件。需要通过props属性来声明。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
		<style type="text/css">
		
		</style>
	</head>

	<body >
<div id="todo-list-example">
  <input
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Add a todo"
  >
  <ul>
    <li
    	
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:title="todo"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>
	

<script>
	Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">X</button>\
    </li>\             (斜杠是在字符串还没有结束，需要换行的时候用)
  ',
  props:['title']
  
})


new Vue({
  el: '#todo-list-example',
  data: {
  	title:'',
    newTodoText: '',
    todos: [
      'Do the dishes',
      'Take out the trash',
      'Mow the lawn'
    ]
  },
  methods: {
    addNewTodo: function () {
      this.todos.push(this.newTodoText)
      this.newTodoText = ''
    }
  }
})
		</script>

	</body>

</html>

letMeAlone_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-组件props属性再回顾

组件有自己独立的作用域！如果需要传递参数进入组件。需要通过props属性来声明。 <input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo" > <li is="to
复制链接

扫一扫

专栏目录