使用 props
props传递值 有规则的 在props中使用驼峰式命名 在模板中需要使用短横线
<div id="app">
<div>{{pasm}}</div>
<!-- 在父组件中调用
title='来自父组件的值'传递给子组件 直接通过属性传递
-->
<men-item title='来自父组件的值'></men-item>
<!-- 动态和静态也可以结合使用 -->
<men-item v-bind:title='pti' conte="helllp"></men-item>
<!-- props中使用驼峰式 在模板中只能使用com-new短线模式 -->
<men-item comNew='来自父组件的值'></men-item>
</div>
<script>
// 父组件向子组件传递值
Vue.component('men-item', {
// props传递值 有规则的 在props中使用驼峰式命名 在模板中需要使用短横线
props: ['title', 'conte', 'comNew'],
data: function() {
return {
msg: '子组件的内容',
}
},
// 驼峰式在字符模板中可以使用
template: '<div>{{msg +"--- "+ title +"--- "+ conte}}</div>'
})
var vm = new Vue({
el: '#app',
data: {
pasm: '父组件的内容',
pti: '动态传递给子组件值'
},
methods: {
}
})
</script>