Vue父组件像子组件传值--自定义属性

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

这里有个注意的地方，Vue实例控制app DIV 大组件，我们在div中天加小组件的时候，传值需要创建自定义的属性

之后在通过props:[‘属性名’] 来把父元素data中的数据传递给子组件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body> 

<div class="app">
<log v-bind:parentmsg="msg"></log>
</div> <script>
// 其中Vue 也可以看作一个大组件，他里面包含了log 子组件
var vm=new Vue({
el:'.app',
data:{
msg:'访问我，你可以吗？'
},
methods: { },
components:{
log:{
// 经过演示，发现子组件中，默认是无法访问到父组件中data上的数据和methods方法的 template:'<h1>我像访问父组件中的msg属性--------{{parentmsg}}</h1>',
// 只有props 是数组其他的都是对象
// filters:{},components:{}diewctives:{}....... // 注意：子组件中的 data 数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如：子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；
// data 上的数据，都是可读可写的；
data(){
return {title:123,content:'qqqq'}
}, // 把父组件传递过来的parentmsg属性，现在props数组中，定义下，这样，才能使用这个数据
props:['parentmsg'], // 注意：组件中的所有 props 中的数据，都是通过父组件传递给子组件的
// props 中的数据，都是只读的，无法重新赋值
}
}
})
</script>
</body>
</html>