Vue中如何声明一个全局组件？Vue如何给组件传值？
具体案例
准备一个Vue.js，开发版下载地址：https://cn.vuejs.org/js/vue.js
开始编码：
<!DOCTYPE HTML >
<html lang='en'>
<head>
<title>VUE To do list </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src='./vue.js' ></script>
</head>
<body>
<div id='app'>
<!-- v-model='inputvalue' 数据绑定，将文本框中的值和data中申明的值绑定 -->
<input type = 'text' v-model='inputvalue' />
<!-- v-on:click='handlebuttonclick' 方法绑定 ，也可以写作@click='handlebuttonclick' -->
<button v-on:click='handlebuttonclick'>提交</button>
<ul>
<!-- v-for="item in list" 这相当于一个for循环，将list中的每一个值都赋给item去循环
v-bind:content='item' 数据传递，将item的值传递给content ，（注意：组件传值需要在组件中声明用于接收的对象）
--->
<todo-item v-bind:content='item'
v-for="item in list" ></todo-item>
<ul>
</div>
<script>
//声明一个组件（全局组件）
Vue.component("TodoItem",{
//声明一个接收对象，用于接收从父组件中传过来的值
props:['content'],
//本组件内部的值和接收的值可以直接在模板中引用
template:"<li>{{content}}</li>"
});
var app = new Vue({
//控制区域
el: '#app',
//管理数据
data: {
list:[],
inputvalue: ''
},
//管理方法
methods:{
handlebuttonclick: function(){
//push() 数组中用于存放值的方法
this.list.push(this.inputvalue);
//清空值
this.inputvalue = '' ;
}
}
});
</script>
</body>
</html>
653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
