组件通过props属性传值
Posted birdyblob
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了组件通过props属性传值相关的知识，希望对你有一定的参考价值。
组件之间的传值
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
data: function () {
return {
count: 0
}
}
通过 Prop 实例向子组件传递数据
Prop 是可以在组件上注册的一些自定义 属性。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 固有属性。
Vue.component(‘blog-post‘, {
props: [‘title‘],
template: ‘<h3>{{ title }}</h3>‘
})
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop ，在组件实例中可以直接访问这个值，就像访问 data 中的值一样
上面的例子是静态绑定，也可以动态绑定vue实例的值
<body>
<!--vue实例需要一个根组件div-->
<div id="app">
<ul>
<!--使用组件-->
<tokyo v-for="item in names " :first-name="item"></tokyo>
</ul>
</div>
<script type="text/javascript">
//注册组件
Vue.component(‘tokyo‘,{
props:[‘firstName‘], //属性
template:‘<li>名字:<h3>{{firstName}}</h3></li>‘ //模板
})
//vue实例
const app = new Vue({
el:‘#app‘,
data:{
names:[‘lixiang‘,‘wanzi‘],
}
})
</script>
</body>
命名方式：
组件名：组件名如果是多个单词时，首字母大写或者加横线都可以。MyComponentName 或my-component-name
若使用首字母大写的方式注册，使用时两种方式都可prop参数：camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
子组件向父元素传值
想要子组件的数据传递给父元素，需要自定义触发事件，实现数据的传值。
子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件
<body>
<!--vue实例需要一个根组件div-->
<div id="app">
<ul>
<!--使用组件，绑定props属性，子组件的触发事件调用父元素方法达到传递参数的目的-->
<tokyo v-for="item in names " :first-name="item" @emitevent="emitName"></tokyo>
</ul>
<h3>选中的姓名是：{{chooseName}}</h3>
</div>
<script type="text/javascript">
<!--注册组件-->
Vue.component(‘tokyo‘,{
props:[‘firstName‘],
template:‘<li>名字:<h3>{{firstName}}</h3> ‘ +
‘ <button @click="chooseEvent(firstName)">点击传递姓名</button></li>‘,
methods:{
chooseEvent(firstName){
console.log(firstName);
//触发父元素中emitevent事件，并传递firstName参数给该事件
this.$emit(‘emitevent‘,firstName);
}
}
})
const app = new Vue({
el:‘#app‘,
data:{
names:[‘莉香‘,‘丸子‘,‘三上‘,‘里美‘],
chooseName:‘‘
},
methods:{
//父元素被触发的事件，name为子组件传递过来的参数，赋给父元素的data:{}中的属性
emitName(name){
console.log("被触发事件");
this.chooseName = name;
}
}
})
</script>
</body>
以上是关于组件通过props属性传值的主要内容，如果未能解决你的问题，请参考以下文章