Vue组件

定义局部组件:

        var TodoItem = {

props:['content'], //接收传进来的值,下面例子没有传值,所以没有写

            template: '组件内容'

        }

 局部组件调用,需要在vue的实例里面添加一个components对这个局部组件进行一下注册:如下

定义全局组件:

        Vue.component('组件名',{

props:['content'],

            template: '组件内容'

        })

通过 :content="item" 传入item

组件里面接收传入的值 props:['content']


每一个Vue组件,都是一个Vue实例Vue实例有的功能,Vue组件都同样拥有也可以定义 methods:{ } 这些属性,反过来,每一个实例也都是一个组建如果一个vue实例里面没有定义template,那么这个实例会把它对应的挂载点下(el:"#id")的所有内容当作模板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>Vuetest</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
   <input type="text" v-model="text">    <input type="button" value="添加" @click="add">
   <ul>
      <todo-item 
  v-for="(item,index) in list" 
  :key="index" 
  :content="item"
  :index="index"
  @delete="del"
  ></todo-item>  
  <!--
@delete="del" 监听子组件的delete事件-->
   </ul>
</div>
<script>
   Vue.component("todo-item",{
     props: ['content',"index"],
     template:"<li @click='handcilck'>{{content}}</li>",
methods:{
    handcilck:function(){
  this.$emit('
delete',this.index)//向外触发一个delete事件
}
}
   })
   
   new Vue({
    el:"#root",
data:{
  text:"",
  list:[]
  },
methods:{
   add:function(){
   this.list.push(this.text);
   this.text = "";
   },
   del:function(index){
     alert(index);
   }
}
});
</script>
</body>
</html>

阅读更多
上一篇Vue.js 计算属性与侦听器
下一篇vue-cli
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭