零基础学vue-组件传值
2020-10-31 本文已影响0人
望月成三人
<html>
<head>
<meta charset="utf-8">
<title>组件传值</title>
<script type="application/x-javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!--从父组件传值到子组件product-com,props取product绑定来自父组件item的值 -->
<!--@toparent触发在子组件自定义的事件，把值传给父元素是通过changeEvent -->
<product-com v-for="item,index in proList" :product="item" @toparent="changeEvent(item.title)"></product-com>
</ul>
<p>选择的商品为：{{choose}}</p>
</div>
<script type="application/javascript">
<!--产品组件 -->
Vue.component("product-com", {
props: ["product"],
template: `
<li>
<h3>产品名称{{product.title}}</h3>
<h4>产品价格{{product.price}}</h4>
<h5>产品描述{{product.desc}}</h5>
<button @click="chooseEvent(product.title)">选择商品</button>
</li>
`,
methods: {
chooseEvent: function(title) {
console.log(title)
<!--通过$emit把子元素的值传给父元素，自定义触发toparent这个事件 -->
this.$emit("toparent", title)
}
}
})
let app = new Vue({
el: "#app",
data: {
proList: [{
"title": "产品1",
"price": 10,
"desc": "描述1"
},
{
"title": "产品2",
"price": 20,
"desc": "描述2"
},
{
"title": "产品2",
"price": 30,
"desc": "描述3"
}
],
choose: "",
},
methods: {
changeEvent: function(title) {
console.log("title")
this.choose = title
}
},
mounted(){
<!--此生命周期,表示已经完成dom和css的加载 -->
console.log(this)
<!--这里可以用打印出来$children属性,可以直接控制子组件的内容 -->
}
})
})
</script>
</body>
</html>
其他的方式
- 子组件直接调用父元素的方法，不用自定义事件
<button @click="$parent.changeEvent(product.title)">选择商品</button> - 子组件直接调用父元素中的变量进行操作
<button @click="$parent.choose=product.title">选择商品</button> - 也可以使用
$root-
$root使用场景：当子组件层数太多，只用$root回到根节点
<button @click="$root.changeEvent(product.title)">选择商品</button>
-
总结
- 父传子(推荐使用)，子组件使用
props接受父元素的值 - 子传父（推荐使用），子组件传值给父元素使用
this.$emit - 其他方式是子组件中的click方法直接调用父元素的方法/变量：
$parent，$root - 父元素可以直接用
$children操作子组件中的内容
