为什么vue的内联样式无效？ p标签里的内容打印不出来
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>vue7-24</title></head>...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue7-24</title>
</head>
<body>
<div id="app">
<child-component inline-template>
<div>
<h2>在父组件中定义子组件的模板</h2>
<p>{{ message }}</p>
<p>{{ msg }}</p>
</div>
</child-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component('child-component',{
data:function(){
return {
msg:'在子组件声明的数据'
}
}
})
var app = new Vue({
data:{ message:'在父组件声明的数据' }
})
</script>
</body>
</html>
浏览器输出的是：
在父组件中定义子组件的模板
{{ message }}
{{ msg }}
自己看出问题了。。。
第一个问题和楼下说的一样，没绑定。。el:'#app'
第二个问题就是没弄明白inline-template的真正功能，只是给组件标签使用inline-template特性，组件就会把它的内容当做模板，它并没有我想的那么强大。。 父子组件间传递数据还是要用props的。 展开
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue7-24</title>
</head>
<body>
<div id="app">
<child-component inline-template>
<div>
<h2>在父组件中定义子组件的模板</h2>
<p>{{ message }}</p>
<p>{{ msg }}</p>
</div>
</child-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component('child-component',{
data:function(){
return {
msg:'在子组件声明的数据'
}
}
})
var app = new Vue({
data:{ message:'在父组件声明的数据' }
})
</script>
</body>
</html>
浏览器输出的是：
在父组件中定义子组件的模板
{{ message }}
{{ msg }}
自己看出问题了。。。
第一个问题和楼下说的一样，没绑定。。el:'#app'
第二个问题就是没弄明白inline-template的真正功能，只是给组件标签使用inline-template特性，组件就会把它的内容当做模板，它并没有我想的那么强大。。 父子组件间传递数据还是要用props的。 展开
展开全部
<child-component inline-template :message="message">
<div>
<p>内联模板</p>
<p>父组件数据: {{ message }}</p>
<p>子组件数据: {{ msg }}</p>
</div>
</child-component>
Vue.component('child-component', {
props:['message'],
data: function() {
return {
msg: '在子组件声明的数据'
}
}
});
props传一下
<div>
<p>内联模板</p>
<p>父组件数据: {{ message }}</p>
<p>子组件数据: {{ msg }}</p>
</div>
</child-component>
Vue.component('child-component', {
props:['message'],
data: function() {
return {
msg: '在子组件声明的数据'
}
}
});
props传一下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
代码好像没问题，看不出
追问
书上的源代码，我照着打了一遍，怎么也出不来效果。。。
追答
vue7-24
{{message}}
var app=new Vue({
el:'#app',
data:{
message:'hhh'
}
})
你试下这个，好像是你没绑定DOM元素 el:'#app',
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
